bems

npm install bems --save

• JavaScript
  • parsing
  • matching
• SCSS
  • mixins

JavaScript

var bems = require('bems')

parsing

bems.B('field__status--success') // "field"
bems.E('field__status--success') // "status"
bems.M('field__status--success') // "success"

bems.E('field--success') // ""
bems.M('field__status') // ""

matching

bems.e('btn') // '.btn,[class^="btn__"],[class*=" btn__"],[class^="btn--"],[class*=" btn--"]'
bems.e('status') // '[class*="__status--"],[class*="__status "],[class$="__status"]'
bems.m('danger') // '[class*="--danger "],[class$="--danger"]'

$(bems.m("danger"))

SCSS

@import './node_modules/bems/bems';

mixins

bems-b

@include bems-b(block) {
  color: blue;
}

.block,
[class^="block__"],
[class*=" block__"],
[class^="block--"],
[class*=" block--"] {
  color: blue; }

bems-e

@include bems-e(element) {
  color: teal;
}

[class*="__element--"],
[class*="__element "],
[class$="__element"] {
  color: teal; }

bems-m

@include bems-m(modifier) {
  color: gold;
}

[class*="--modifier "],
[class$="--modifier"] {
  color: gold; }