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

BEM 命名規則在 SCSS 開發為必備，透過 Stylelint 也可加以檢查，且支援 SCSS 的 &。

Version

Stylelint 16.23.1

Stylelint

$ npm install -D stylelint 

• stylelint：檢查 SCSS

.stylelintrc

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

• Stylelint 設定檔

Line 3

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

• rules：
  • selector-class-pattern：以 regex 定義 BEM 命名規則
  • resolveNestedSelectors：SCSS 必須加這行才能看懂 &

Conclusion

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