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