BEM methodology

note.md

BEM (Block, Element, Modifier): a methodology/guideline for scalable web

• Component based methodology/archetecture (reusable)
• Guideline for scalable web development (maintainable)

Unified terminology: Block/Element/Modifier

• Block: independent, reusable (equivalent to component in Web Components)
• Element: composite part of a block
  • optional
  • specific to a block
• Modifier: state of a block or an element

Implementation

• template (eg. HTML)
• style (eg. CSS)
• behavior (eg. JS)

CSS

• class selector only
  • Not tied to specific tag: a block can be div, section, etc.
  • Mixin support: an element can be a block and vice versa.
• name convention: reflective, avoid conflicts
  • block-name
  • block-name__elem-name
  • block-name__elem-name_mod-name (bool modifier)
  • block-name__elem-name_mode-name_mod-value (key/value modifier)
• Best practices:
  • Use linter to enforce convention
  • Avoid subtree match (https://philipwalton.com/articles/side-effects-in-css/)

.block1 .block2 { ... }
.block3 .block2 { ... }

This may cause ambiguous issue, given the below template:

<div class="block1">
  <div class="block2"></div>
  <div class="block3">
    <div class="block2"></div> <!-- the style is ambiguous if the above 2 styles are in different order -->
  </div>
</div>

In the CSS:

• With the exception of a reset stylesheet, all other files must only contain class selectors.
• All class selectors must begin with the name of the file.
• Nested selectors may only be two levels deep and must consist of a modifier class followed by an element class.

In the HTML:

• Any HTML tag with an element class must be a descendant of a tag with a block class by the same name.
• Any HTML tag with a modifier class must also have a block (or element?) class by the same name.

JS

• Application = BEM tree
• Changing modifier for state change
• Declare response/handler to modifier change (reactive?)

Redefinition

• Overriding BEM entities on different levels, eg.

common -> desktop
   |
    ----> mobile

Interaction

• Block-to-block:
  • subscription to event of another block instance
  • subscription to modifier change
  • direct method call
  • PubSub
• Block-to-element: block helpers

File structure

• Each entity in a separated file, eg.

menu.js --> block
menu.css --> block
menu__item.css --> element
menu__item_active.css --> modifier

• Redefinition levels

common.blocks
desktop.blocks
mobile.blocks

Build

• tools: Gulp, ENB, etc.
• BEM declaration: what and in what order of blocks used on a page