Specificity Summary

Specificity is a three-column score (IDs, Classes, Types). Use low-specificity selectors like :where() and BEM to keep styles manageable. Reach for !important only as a last resort; prefer @layer for cascade control.

Example

/* Best practices */
@layer base, components, utilities;
:where(h1,h2,h3) { margin-top: 1.5rem; }    /* zero specificity reset */
.card { border-radius: 8px; }               /* single class component */
.card--featured { --card-border: #0d6efd; } /* modifier via variable */
@layer utilities { .sr-only { position: absolute !important; } }

CSS

Full Editor

Pro Tip

Flat selectors + CSS variables + @layer = a specificity-free architecture.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned