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.

  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
    .bookmarks__entry__title__icon {}

    .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.