bem-classnames-maker
A simple utility for making class names in accordance with BEM methodology
Installation
npm install bem-classnames-maker
or yarn add bem-classnames-maker
How to use
; // Create a BEM instance with passed block nameconst cx = ; ; // "block"; // "block_mod"; // "block_mod1 block_mod2"; // "block_mod1_value1 block_mod2_value2"; // "block__element"; // "block__element_mod"; // "block__element_mod1 block__element_mod2"; // "block__element_mod1_val1 block__element_mod2_val2"; // "block__element_mod1_val1 block__element_mod3"
If you need to add a small modifier (without block and element prefix) you can do that by passing the modifier as a string (but BEM methodology doesn't encourage such naming):
const cx = ;; // "block mod"
There is also an ability to chande default delimiters:
const cx = ;
Examples
React Component
;; const cx = ; const MyComponent = <div className=> <div className=> <img src="path_to_user_avatar.jpg" /> </div> <div className=> John Doe </div> </div>;