How BEM tames specificity and !important

WHAT THIS TESTS: This evaluates whether you understand why CSS specificity escalates into !important wars and how a flat, single-class methodology prevents it.

A GOOD ANSWER COVERS: Deeply nested selectors and !important usually signal a specificity arms race: a later rule cannot override an earlier one without matching or exceeding its specificity, so developers add more ancestors or reach for !important. BEM, which stands for Block, Element, Modifier, names components with flat single classes such as card, card__title, and card--featured. Because each rule targets one class, every rule has the same low specificity, so overrides depend on simple source order rather than selector weight. That eliminates the need for descendant chains to scope styles and removes the temptation to use !important. It also makes class names self-documenting and components portable, since styles are not tied to DOM structure.

COMMON WRONG ANSWERS: Calling BEM purely a readability convention and missing its specificity benefit. Saying it works by increasing specificity rather than flattening it. Believing it forbids all nesting in tooling, when the point is the resulting selector specificity, not how you author it. Thinking it requires a preprocessor.

LIKELY FOLLOW-UPS: How does specificity actually rank ids, classes, and elements. How does BEM compare with utility-first approaches or CSS modules and scoping. When is a modifier versus a separate block the right choice.

ONE CONCRETE EXAMPLE: Instead of .sidebar .widget ul li a.active needing !important to win, BEM expresses it as .nav__link--active, a single class at one specificity level that any later rule can override by ordering alone, with no nesting and no !important.