Nicely Presented Misnomer

    bemhint-css-naming

    1.0.1 • Public • Published

    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 block 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-*'
                ]
            }
        }
    };

    Install

    npm i bemhint-css-naming

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • dima117
    • egavr
    • sipayrt