CSS Specificity Calculator

A guide to understanding, calculating, and managing CSS specificity to prevent and debug style conflicts.

Usage

Ask about specificity calculation, debugging style conflicts, or specificity management strategies.

Examples

• "Why is my style being overridden? Compare these selectors"
• "How do I reduce specificity of a complex selector?"
• "Use :where() to write zero-specificity selectors"

Guidelines

• Inline styles beat IDs beat classes beat elements
• Avoid !important except for utility overrides
• Use :where() for zero-specificity selectors in resets
• Keep selector specificity as low as possible
• Use cascade layers for architectural specificity control