Add bem selector-class-pattern stylelint rule

index.js

@@ -46,6 +46,15 @@ module.exports = {
     "declaration-no-important": true,
     "declaration-property-unit-allowed-list": {
       "font-size": ["px", "em"]
-    }
+    },
+
+    // bem
+    // https://github.com/postcss/postcss-bem-linter/issues/82#issuecomment-193851353
+    "selector-class-pattern": [
+      "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
+      {
+        "message": "Expected class selector to match BEM naming convention"
+      }
+    ]
   }
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netcentric/stylelint-config",
   "description": "Netcentric's coding and style rules for Stylelint",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "Apache-2.0",
   "private": false,
   "publishConfig": {

test/index.scss

@@ -23,3 +23,13 @@
 .unsuported {
   display: flex;
 }
+
+/* bem ok */
+.block__element {
+  color: red;
+}
+
+/* bem error */
+.block_element {
+  color: red;
+}