BEM class names generator
Friendly BEM class names generator. Great for React.
Bem-cn (aka BEM Class Name) is extra small (minified+gzipped less than 1.6Kb) and extremely simple client-side library and Node.js module.
Important! Only bem-cn@3.x+
compatible with react@16+
.
Please do not use version 2.x or lower.
More details about the problem.
Inspired by b_.
Justification
I spent a lot of time finding BEM class name generator, that meets my needs:
- Simple usage with React
- Support modifiers without value
- Mix multiple blocks
- Friendly API
When my efforts had led to naught I've created this micro library.
Install
With Node.js:
npm i --save bem-cnyarn add bem-cn
Works with webpack and browserify:
// CommonJSvar block = ; // ES6;
API
const b = ; // Block; // 'button' // Element; // 'button__icon' // Modifier; // 'button button_type_text'; // 'button button_onlykey'; // 'button' ; // 'button__icon button__icon_name_check' // Mix another classes; // 'button__icon another'; // 'button__icon one two' // States like in SMACSS: https://smacss.com/book/type-stateb; // 'button is-hidden'b; // 'button'b; // 'button is-hidden is-error' // More states!b; // 'button is-loading'b; // 'button has-content'
// Setup custom delimiters; const block = ; const b = ; ; // 'block~~element'; // 'block block--mod-value'
// Setup namespaceconst block = ; const b = ; ; // 'ns-block'; // 'ns-block__element'; // 'ns-block ns-block_mod_value'
Try it with React
;;; const b = ; const Popup = React; ReactDOM; /*<div class="popup"> <span class="popup__icon"></span> <div class="popup__content popup__content_skin_bright"> Hello! </div></div> */
Troubleshooting
Maigrate to version 3.x
@todo
PropTypes warnings
bem-cn@2.x
or lower has specific chainable API. As a result, each call returns function for a further call. But most components are expecting property className
as a string and using propTypes
object for check this. In this case, you will see a warning. There are the couple of ways to avoid these warnings below.
#1
Use final call without arguments to get a string
<CustomComponent = />
#2
Use explicit call of method toString()
:
<CustomComponent = />
#3
Use less specific propTypes rules:
let CustomComponent = React;
ES3 browsers
bem-cn
is fully compatible with ES5 browsers. If you are going to support ES3 browsers than just use es5 shim.