Skip to content

yungvldai/fbem

Repository files navigation

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

demo

Packages

There is a rule that packages with the same major version must be compatible

Package name Package version
@fbem/core npm
@fbem/css-loader npm
@fbem/typescript-plugin npm
@fbem/utils npm

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'