Specificity Bugs
Learn to identify the most common specificity pitfalls: reset conflicts, plugin overrides, and inline styles.
CSS
Intermediate
4 min read
Common Specificity Bugs
Example
/* Bug 1: reset too specific */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Bug 2: inline style wins — can only be beaten by !important */
<div style="color:red"> → your CSS loses unless you use !important
/* Bug 3: ID in HTML vs class in CSS */
#sidebar .widget { color: blue; } /* 1,1,0 — very hard to override */
/* Fix: drop the ID */
.sidebar .widget { color: blue; } /* 0,2,0 — normal to override */ Pro Tip
Avoid inline styles and IDs in stylesheets — they start specificity wars.