bem-selector
v1.0.0
Published
Vladimir Novick <[email protected]>
Downloads
41
Maintainers
Readme
bem-selector
Friendly BEM selector package to use with your project. based on BEM methodology developed by team at Yandex
for more info on methodology: https://en.bem.info/method/
Usage
bem-selector works both with CommonJS/AMD and as Browser global. bemSelector gets bemBlock as a parameter and return generated block of classnames.
##Simple
var bemSelector = require('bemSelector');
//blocks
bemSelector({
name: "test-container",
modifiers: {
hidden: true
}
})
//will result with
'test-container test-container--hidden'
//blocks with children
bemSelector({
name: "test-container",
children: [{
name: 'el1',
modifiers: {
hidden: true
}
},
{
name: 'el2'
}
],
modifiers: {
hidden: true
}
})
//will result in
{
name: "test-container test-container--hidden",
children: {
el1: "test-container__el1 test-container__el1--hidden",
el2: "test-container__el2"
}
}
#Advanced You can use your own seperators in the following way:
var b = require("bemSelector");
bemSelector = b.config({
elementSeperator: "__",
modSeperator: "--",
modValueSeperator: "-",
classSeperator: " "
})
then use as described above
Great to use with React/Mithril/Angular/Ember/Backbone or any other library or framework.
##React usage example
var bemBlock = bemSelector({
name: "test-container",
children: [{
name: "el1",
modifiers: {
red: true
}
},
{
name: "el2",
modifiers: {
blue: true
}
}],
modifiers: {
visible: true
}
});
var ExampleDiv = React.createClass({
render: function() {
return (
<div className={bemBlock.name}>
<div className={bemBlock.children.el1}><p>Red element</p></div>
<div className={bemBlock.children.el2}><p>Blue element</p></div>
</div>
);
}
});
React.render(
<ExampleDiv />,
document.getElementById('content')
);