Frontend Developer
mediumcss-specificity-explained

How does CSS specificity work and how do you avoid specificity problems?

Answer

Specificity decides which CSS rule wins when multiple rules match. **General order:** inline styles > IDs > classes/attributes/pseudo-classes > elements/pseudo-elements. **Avoid problems by:** - Keeping selectors simple (prefer classes) - Using a consistent methodology (BEM, utility CSS) - Avoiding `!important` (use it only for utilities/overrides with a clear policy) - Scoping components properly **Interview tip:** explain how order in the stylesheet matters when specificity ties.

Related Topics

CSSStylingFrontend