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