CSS BEM Methodology

The BEM methodology (Block, Element, Modifier) is a popular naming convention for classes in HTML and CSS.

It is less confusing comparing to the other methods (i.e. SMACSS) but still provides a good architecture with a recognizable terminology.

3 principle elements of BEM
  • Block: Container, Wrapper, Layout elements

Example: .form, .menu

  • Element: Child of a Block element

Example: .form__input, .menu__item

  • Modifier: can change the appearance of a Block or Element

Example: .form__input--disabled, .menu__item--active

Rules of BEM
  • HTML tag or ID selector shouldn't be used
  • Elements are namespaced using the Block names and separated by __ (double underscores)
  • Modifiers are separated by —- (double hyphens)

Benefits of using BEM
  • BEM is hugely adopted and one of the most popular methodology for writing CSS
  • BEM helps to build a solid structure that remains simple and easy to understand.
  • Because of strict naming conventions, there is less possibility to run into conflicts with CSS names
  • Everything is a class and nothing is nested, so won't have to face specificity related issues.
  • The Prolonged naming convention can reduce the readability of the code but it helps to understand the role of each element.

Share this post


Follow me on Social Media