Functional BEM
FBEM is a functional implementation of the BEM methodology. FBEM packages help you clean up your styles and make them clearer and more organized.
Demo
Packages
There is a rule that packages with the same major version must be compatible
| Package name | Package version |
|---|---|
| @fbem/core |  |
| @fbem/css-loader |  |
| @fbem/typescript-plugin |  |
| @fbem/utils |  |
Code example
/* style.css */
.block {
position: relative;
}
.block__elem {
color: purple;
}
.block__elem_mod_val-a {
backgound: white;
}
.block__elem_mod_val-b {
backgound: black;
}
.block__name-with-dashes {
display: none;
}
.block__name-with-dashes_visible {
display: block;
}/* index.js */
import { cnBlock, cnBlockElem, cnBlockNameWithDashes } from './style.css';
cnBlock(); // 'block'
cnBlockElem({ mod: 'val-a' }); // 'block__elem block__elem_mod_val-a'
cnBlock({}, ['mix']); // 'block mix'
cnBlockElem({ mod: 'val-b' }, ['mix1', 'mix2']); // 'block__elem block__elem_mod_val-b mix1 mix2'
cnBlockNameWithDashes({ visible: true }); // 'block__name-with-dashes block__name-with-dashes_visible'
