Nascent Political Miscreant

    @namics/stylelint-bem

    6.3.4 • Public • Published

    License NPM version Build Status

    Stylelint BEM Namics

    Verifies that the given css/less/scss follows the following BEM code conventions.

    screenshot

    Installation

    npm install @namics/stylelint-bem --save-dev
    

    Configuration

    Simple configuration

    {
      "plugins": [
        "@namics/stylelint-bem"
      ],
      "rules": {
        "plugin/stylelint-bem-namics": true
      }
    }

    Advanced configuration

    You can define one or more namespaces which has to be prepended before every class name:

    {
      "plugins": [
        "@namics/stylelint-bem"
      ],
      "rules": {
        "plugin/stylelint-bem-namics": {
          "namespaces": ["ux-"]
        }
      }
    }

    and in case of emergency you can overwrite the default prefixes

    {
      "plugins": [
        "@namics/stylelint-bem"
      ],
      "rules": {
        "plugin/stylelint-bem-namics": {
          "patternPrefixes": [ "a", "m", "o", "t", "p" ],
          "helperPrefixes": [ "is", "has" ]
        }
      }
    }

    ... or you can pass empty prefixes to disable prefixes completely

    {
      "plugins": [
        "@namics/stylelint-bem"
      ],
      "rules": {
        "plugin/stylelint-bem-namics": {
          "patternPrefixes": [],
          "helperPrefixes": []
        }
      }
    }

    Valid examples

    Default Pattern Prefixes

    • a Atom
    • m Molecule
    • o Organism
    • l Layout
    • g Grid
    • h Helper

    Default Helper Prefixes

    • state State
    .a-[block-name] {}
    .m-[block-name] {}
    .o-[block-name] {}
    .l-[block-name] {}
    .g-[block-name] {}
    .h-[block-name] {}
    
    .a-[block-name]--[modifier-name] {}
    .m-[block-name]--[modifier-name] {}
    .o-[block-name]--[modifier-name] {}
    .l-[block-name]--[modifier-name] {}
    .g-[block-name]--[modifier-name] {}
    .h-[block-name]--[modifier-name] {}
    
    .a-[block-name]__[element-name] {}
    .m-[block-name]__[element-name] {}
    .o-[block-name]__[element-name] {}
    .l-[block-name]__[element-name] {}
    .g-[block-name]__[element-name] {}
    .h-[block-name]__[element-name] {}
    
    .a-[block-name]__[element-name]__[element-name] {}
    .m-[block-name]__[element-name]__[element-name] {}
    .o-[block-name]__[element-name]__[element-name] {}
    .l-[block-name]__[element-name]__[element-name] {}
    .g-[block-name]__[element-name]__[element-name] {}
    .h-[block-name]__[element-name]__[element-name] {}
    
    .state-a-[block-name]--[state-name] {}
    .state-m-[block-name]--[state-name] {}
    .state-o-[block-name]--[state-name] {}
    .state-l-[block-name]--[state-name] {}
    .state-g-[block-name]--[state-name] {}
    .state-h-[block-name]--[state-name] {}

    Exception

    Whenever you will apply rules you will run into edge cases like third-party code or wysiwyg content where those rules have to be bent a little bit.

    In this case you can get around the rules above but you should leave a comment why and enable the linting again:

    /* wysiwyg does not follow bem */
    /* stylelint-disable plugin/stylelint-bem-namics */
        .wysiwyg .headline {
            font-size: 34px;
        }
    /* stylelint-enable plugin/stylelint-bem-namics */

    Changelog

    Please see the CHANGELOG.md

    Install

    npm i @namics/stylelint-bem

    DownloadsWeekly Downloads

    4,711

    Version

    6.3.4

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar