BEM cheat sheet

BEM tools

Tools that help to do BEM

Install project stub

$ git clone https://github.com/bem/project-stub.git

Install bem-tools globally

$ sudo npm install bem-cli -g

Libraries

BEM Grid

$ bower install bem-incubator/bem-grid --save

BEM Typography

bower install verybigman/bem-typography --save

JavaScript

Get mod value

this.getMod(modName)

Get element mod value

this.getMod(elem, modName)

Check whether the block (element) has the modifier.

this.hasMod([elem], modName, modVal)

Set modifier.

this.setMod([elem], modName, modVal)

NOTE: This doesn't work:

this.elem('elemName').setMod(...)

Delete modifier.

this.delMod([elem], modName)

Toggle modifiers.

this.toggleMod([elem], modName, modVal1, modVal2, [condition])

поиск внутри контекста

this.findBlockInside([elem], block)

поиск снаружи контекста

this.findBlockOutside([elem], block)

поиск на DOM-узле текущего блока

this.findBlockOn([elem], block)

поиск внутри контекста

this.findBlocksInside([elem], block)

// поиск снаружи контекста

this.findBlocksOutside([elem], block)

// поиск на BEM-узле текущего блока

this.findBlocksOn([elem], block)

//кэширующий селектор

this.elem(name, [modName], [modVal])

//некэширующий

this.findElem([ctx], name, [modName], [modVal])