檢查 CSS 符合 BEM 命名規則 | 次世代 Hugo

BEM 命名規則在 CSS 開發為必備，透過 Stylelint 也可加以檢查。

Version

Stylelint 16.23.1

Stylelint

$ npm install -D stylelint 

• stylelint：檢查 CSS

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": [
      "^[a-z]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)?$",
      {
        "message": "Expected class selector to follow BEM"
      }
    ]
  }
}

• Stylelint 設定檔

Line 3

{
  "rules": {
    "selector-class-pattern": [
      "^[a-z]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)?$",
      {
        "message": "Expected class selector to follow BEM"
      }
    ]
  }
}

• rules：
  • selector-class-pattern：以 regex 定義 BEM 命名規則

Conclusion

• Stylelint 不用安裝其他 plugin，只要設定 selector-class-pattern 即可檢查 BEM 命名規則