PostCSS Bem плагин

PostCSS плагин, для добавления названия классов, исходя из правил BEM и SUIT методологии.


BEM  — методология быстрого создания сайтов, основанная на повторном применении разработанных с ее помощью компонентов. Такой подход, позволяет повторно использовать уже готовый код, избегать «копи паста», облегчить рефакторинг, упростить код, а также дает возможность создавать самодокументируемый код.

 

Установка

npm install postcss-bem

Пример, как писать стили, с использованием BEM:


@utility blockName {
    color: blue;
}

@utility blockName span {
    color: green;
}

@component elementName {
    color: brown;

    @modifier mName {
        color: greenyellow;
    }

    @descendent dName {
        color: aqua;
    }

    @when sName {
        color: gainsboro;
    }
}

@component-namespace nmsp {
    @component ComponentName {
        color: red;
    }
}
.u-blockName {
    color: blue
}

.u--blockName {
    color: green
}

.elementName {
    color: brown
}

.elementName.is-sName {
    color: gainsboro
}

.elementName--mName {
    color: greenyellow
}

.elementName__dName {
    color: aqua
}

.nmsp-ComponentName {
    color: red
}

Пример: чтение из файла test.css и вывод в файл out.css

var postcss = require("postcss"); // подключение PostCSS
var fs = require("fs"); // подключение стандартного модуля File System
var css = fs.readFileSync("./css/test.css", "utf-8"); // Считывание исходного файла
postcss([ require('postcss-bem')({
    defaultNamespace: undefined, // пространство имен по умолчанию для использования, ни по умолчанию
    style: 'suit', // suit или bem, suit установлено по умолчанию,
    separators: {
        descendent: '__' // переписывает любой разделитель по умолчанию, для выбранного стиля
    },
    shortcuts: {
        utility: 'util',
        b:"b"
    }
}) ]).process(css).then( function(res) {
    fs.writeFileSync("./css/out.css", res); // Запись в out.css
});

defaultNamespace — пространство имен по умолчанию, по умолчанию стоит undefined

style — тип методологии, которая будет применена(BEM или SUIT), по умолчанию SUIT,

separators — вид разделителя между названиями, обычно используется _ или

separators — ярлыки

 

C ярлыками

@b nav { /* b для блока */
    @e item { /* e для элемента */
        display: inline-block;
    }
    @m placement_header {
        background-color: red;
    }
}
.nav {}
.nav__item {
    display: inline-block
}
.nav_placement_header {
    background-color: red
}

 

Использование


postcss([ require('postcss-bem')({
    defaultNamespace: undefined, // пространство имен по умолчанию для использования, ни по умолчанию
    style: 'suit', // suit или bem, suit установлено по умолчанию,
    separators: {
        descendent: '__' // переписывает любой разделитель по умолчанию, для выбранного стиля
    },
    shortcuts: {
        utility: 'util' //переопределяет имя правила
    }
}) ])

Доверие от мировых лидеров