No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
README.md
README.ru.md
package.json

README.md

bemhint-css-naming

Plugin for bemhint which validate css classes.

  1. Checks css classes for BEM-notation;
  2. Checks for existing target block in the selector.

Example for my-block.css (exclude: test-*)

/* ok */
.my-block
{
    color: red;
}

.b-page .my-block .another-block
{
    color: red;
}

.my-block .another-block > a:hover,
.my-block__elem,
.my-block__elem_mod_val
{
    color: red;
}

/* will be ignored because of exclude matching */
.my-block .test-e_x_c_l_u_d_e_d
{
    color: red;
}

/* not ok */

/* invalid class name */
.my-block__elem__elem2
{
    color: black;
}

/* there is no target block in selector */
.another-block
{
    color: green;
}

/* there is no target block */
.test-e_x_c_l_u_d_e_d
{
    color: red;
}

How to install

$ npm install bemhint-css-naming

How to use

Add plugin to .bemhint.js:

module.exports = {
    plugins: {
        'bemhint-css-naming': true
    }
};

Exclude some classnames from BEM-naming validation:

module.exports = {
    plugins: {
        'bemhint-css-naming': {
            excludeClasses: [
                'my-another-block',
                'test-*'
            ]
        }
    }
};