A sass library from easily generating BEM methodology style classes
Import it into your main stylesheet:
@import'get-bem.scss';@includeblock("content") {width:100%;@includemodifier('hidden') {visibility:hidden; }@includeelement('body') {display:flex;justify-content:center;font-size:1.1rem;@includemodifier('small') {font-size:1rem; }@includemodifier('tiny') {font-size:.75rem; }@includeelement('image') {width:200px;height:200px; } }@includeelement('footer') {border-top:1pxsolidinitial; }}The compiled CSS:
.content {width:100%;}.content--hidden {visibility: hidden;}.content__body {display: flex;justify-content: center;font-size:1.1rem;}.content__body--small {font-size:1rem;}.content__body--tiny {font-size:0.75rem;}.content__body__image {width:200px;height:200px;}.content__footer {border-top:1px solid initial;}By default BEM Constructor uses the following BEM convention:
- Two underscores (__) for elements
- Two hyphens for modifiers (--).
You can customize them:
$element-seperator:'_E_';// Defaults to '__'$modifier-seperator:'-M-';// Defaults to '--'
BEM (Block, Element, Modifier) is a naming convention methodology that makes your css reusable understandable, easier, scalable.
More info
