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')
);