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 classes to an element, which introduces a degree of CSS specificity, and reduces the reusability of CSS rules. Using BEM allows us to combine the constituent names into one style class name, and remove any concern around CSS specificity.
If...