FBEM is a functional implementation of the BEM methodology. FBEM packages help you clean up your styles and make them clearer and more organized.
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 |
/* 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'