O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making the switch to BEM

So what is BEM, and why can it help with reducing or removing CSS specificity issues?

BEM, or Block Element Modifier, helps us style elements using a systematic naming convention, which is structured thus:

  • .block: top-level containing the element we're going to change
  • .block__modifier: the style assigned when the state of an element is changed
  • .block__element: an element inside a top-level container
  • .block__element__modifier: alternate representation of an element, when its state has been changed

The idea behind this style of coding is to make it portable and easier to maintain. The basis for this is that, while standard, non-BEM CSS is more concise, it is harder to infer what each rule does. We frequently have to assign multiple ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required