BEM the 5 rules

5 Simple rules that will help you write your css using the BEM naming convention.

  1. Remember BEM is for organizing your components and understandinf hierarchy between those components.
    .block_element_modifier

    .menu__item__link
    .arm__hand__fingers
    .section--wide
  2. The file name should match the block name
    File name: gallery.scss
    gallery { display: flex; }
  3. Two word block names should be separated by a hyphen .main-menu__item
  4. Descendants should come after a double underscore (__) .main__header__logo
  5. More than 3 descendants is not good, start a new block
    Bad
    .bookmarks__entry__title__icon {}

    Good
    .bookmarks__entry .title__icon
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.