0.2.0 • Published 10 years ago

rebem-css v0.2.0

Weekly downloads
29
License
MIT
Repository
github
Last release
10 years ago

npm travis coverage deps gitter

BEM syntax for CSS.

Overview

Dead simple

It just replaces substrings in selectors:

:block()

:block(block) {}
.block {}

:elem()

:block(block):elem(elem) {}
.block__elem {}

:mod()

:block(block):mod(mod) {}
.block_mod {}

:block(block):mod(mod val) {}
.block_mod_val {}
:block(block):elem(elem):mod(mod) {}
.block__elem_mod {}

:block(block):elem(elem):mod(mod val) {}
.block__elem_mod_val {}

CSS compatible

It's just a custom pseudo-classes, so you can use it with Less or any other CSS preprocessor:

:block(block) {
    &:mod(mod) {

    }

    &:elem(elem) {
        &:mod(mod val) {

        }
    }
}

Usage

rebem-css is a PostCSS plugin.

CLI

npm i -S postcss postcss-cli rebem-css
postcss --use rebem-css test.css -o test.css

API

npm i -S postcss rebem-css
import postcss from 'postcss';
import reBEMCSS from 'rebem-css';

console.log(
    postcss([ reBEMCSS ]).process(':block(block) {}').css
);
// .block {}

webpack

npm i -S postcss postcss-loader rebem-css
import reBEMCSS from 'rebem-css';

export default {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            }
        ]
    },
    postcss() {
        return [ reBEMCSS ];
    }
};

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: [
    new webpack.DefinePlugin({
        'process.env': {
            REBEM_MOD_DELIM: JSON.stringify('--'),
            REBEM_ELEM_DELIM: JSON.stringify('~~')
        }
    })
]
0.2.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago