Pobem - postcss plugin for BEM
BEM syntax for CSS problem? Use POBEM!
Overview
Using with postcss-nested or less/sass
block).modmod val) { /* 1 */ mod2 val2) { /* 2 */ color: #444223; } elem) { /* 3 */ width: 100px; mod val) { /* 4 */ width: 40px; } } > h2 { /* 5 */ opacity: .3; }}
1 ->
Using with stylus
block).modmod val) mod2 val2) color: #444223 elem) width: 100px > h2 opacity: .3
Combined chain syntax
block).elemelem) {}-> .block__elem {}
Using pseudo elements
block).elemelem):after {}-> .block__elem:after {}
mod
val
is optional
Quotes and delimiters between block(block).mod(mod val) === block('block').mod('mod', 'val') === block('block').mod('mod' -> 'val')
Usage
pobem
is a PostCSS plugin.
CLI
npm i -S postcss postcss-cli pobem
postcss --use pobem test.css -o test.css
API
npm i -S postcss pobem
;; console;// .block {}
webpack
npm i -S postcss postcss-loader pobem
; module: loaders: test: /\.css$/ loader: 'style!css!postcss' { return pobem ; };
Custom delimeters
Default delimeters are _
for modifiers and __
for elements, but you can change it with special environment variables. For example in webpack you can do this with DefinePlugin
:
plugins: 'process.env': BEM_MOD_DELIM: JSON BEM_ELEM_DELIM: JSON