majiayu000 CSS Inspector Skill
This skill helps you understand how CSS rules interact through the cascade, specificity, and inheritance. I'll analyze your CSS to reveal computed styles, explain why certain rules apply, and suggest simplifications.
What I Can Analyze
Specificity Calculations
- Calculate selector specificity
- Compare competing rules
- Identify specificity issues
- Suggest lower-specificity alternatives
Cascade Analysis
- Show rule application order
- Identify overridden rules
- Explain cascade layers
- Track source order impact
Inheritance Tracking
- Show inherited properties
- Identify inheritance chains
- Explain computed values
- Detect inheritance issues
Selector Complexity
- Measure selector depth
- Identify overly specific selectors
- Find redundant selectors
- Suggest simplifications
Specificity Explained
Specificity Formula: (a, b, c, d)
- a: Inline styles (1,0,0,0)
- b: ID selectors (#id)
- c: Class selectors (.class), attribute selectors ([attr]), pseudo-classes (:hover)
- d: Element selectors (div), pseudo-elements (::before)
Examples
/* (0,0,0,1) */
div { }
/* (0,0,1,0) */
.button { }
/* (0,0,1,1) */
div.button { }
/* (0,0,2,0) */
.button.primary { }
/* (0,0,2,1) */
nav.button.primary { }
/* (0,1,0,0) */
#header { }
/* (0,1,1,1) */
#header .button { }
/* (0,0,3,0) */
.nav .item .link { }
/* (1,0,0,0) */
<div style="color: red"> /* Inline style */
Specificity Comparison
/* Which rule wins? */
/* (0,0,1,0) - .button */
.button {
color: blue;
}
/* (0,0,2,0) - .nav .button - WINS */
.nav .button {
color: red;
}
/* (0,1,0,0) - #header - WINS */
#header {
color: green;
}
/* !important overrides specificity */
.button {
color: yellow !important; /* WINS over everything except inline !important */
}
Cascade Order
Rule Resolution Order (Highest to Lowest)
Inline styles with !important
<div style="color: red !important">Stylesheet rules with !important
.text { color: blue !important; }Inline styles
<div style="color: green">Stylesheet rules (by specificity)
#id .class element { }Browser defaults
Same Specificity? Last One Wins
/* Same specificity (0,0,1,0) */
.button {
color: blue;
}
.button {
color: red; /* WINS - appears later */
}
Source Order
<head>
<style>
.button { color: blue; }
</style>
<link rel="stylesheet" href="styles.css"> <!-- .button { color: red; } -->
<style>
.button { color: green; } /* WINS - last in source order */
</style>
</head>
Cascade Layers
Layer Priority (Low to High)
/* Define layer order */
@layer reset, base, theme, utilities;
@layer reset {
* { margin: 0; }
}
@layer base {
button { padding: 0.5rem; }
}
@layer theme {
button { padding: 1rem; } /* WINS over base */
}
@layer utilities {
.p-2 { padding: 0.5rem !important; } /* WINS over everything */
}
/* Unlayered styles have highest priority (except !important) */
button { padding: 2rem; } /* WINS over all layers */
Inheritance
Properties That Inherit
/* Text properties inherit */
color /* ✓ Inherits */
font-family /* ✓ Inherits */
font-size /* ✓ Inherits */
font-weight /* ✓ Inherits */
line-height /* ✓ Inherits */
text-align /* ✓ Inherits */
text-transform /* ✓ Inherits */
letter-spacing /* ✓ Inherits */
word-spacing /* ✓ Inherits */
/* Most other properties don't inherit */
display /* ✗ Doesn't inherit */
margin /* ✗ Doesn't inherit */
padding /* ✗ Doesn't inherit */
border /* ✗ Doesn't inherit */
background /* ✗ Doesn't inherit */
width /* ✗ Doesn't inherit */
height /* ✗ Doesn't inherit */
Force Inheritance
/* Force a property to inherit */
.child {
border: inherit; /* Inherit from parent */
color: inherit; /* Explicitly inherit */
all: inherit; /* Inherit all properties */
}
/* Use currentColor for color inheritance */
.icon {
fill: currentColor; /* Uses inherited color */
stroke: currentColor;
}
Inheritance Chain Example
body {
color: #333;
font-size: 16px;
}
main {
/* Inherits color: #333 */
/* Inherits font-size: 16px */
}
.card {
font-size: 14px; /* Overrides inherited 16px */
/* Still inherits color: #333 */
}
.card-title {
font-weight: bold;
/* Inherits font-size: 14px from .card */
/* Inherits color: #333 from body */
}
Analyzing Specificity Conflicts
Example Problem
/* Why isn't my button blue? */
.button {
background: blue; /* Not working! */
}
/* Other rules in stylesheet: */
nav .menu .button {
background: red; /* This wins: (0,0,3,0) > (0,0,1,0) */
}
Solution Analysis
Current selector: .button
Specificity: (0,0,1,0)
Conflicting selector: nav .menu .button
Specificity: (0,0,3,0)
Problem: Conflicting selector has higher specificity
Solutions:
1. Increase specificity: nav .menu .button--primary (0,0,4,0)
2. Reduce other selector: .button (refactor nav .menu .button)
3. Use :where(): :where(nav .menu) .button (0,0,1,0)
4. Last resort: !important
Computed Style Analysis
What Gets Computed?
.element {
/* Declared values */
font-size: 1.5em;
color: inherit;
width: auto;
/* Computed values (depends on context): */
/* font-size: 24px (if parent is 16px) */
/* color: #333 (if parent color is #333) */
/* width: 800px (if content requires 800px) */
}
Relative Units Resolution
html {
font-size: 16px;
}
.parent {
font-size: 1.5rem; /* Computed: 24px */
}
.child {
font-size: 2em; /* Computed: 48px (2 × parent's 24px) */
padding: 1em; /* Computed: 48px (1 × element's 48px) */
margin: 1rem; /* Computed: 16px (1 × root's 16px) */
}
Selector Complexity Analysis
Overly Complex Selectors
/* ❌ Too complex (specificity: 0,1,3,3) */
#sidebar nav.primary ul.menu li.item a.link {
color: blue;
}
/* Problems:
* - Very high specificity (0,1,3,3)
* - Hard to override
* - Fragile (breaks if HTML structure changes)
* - Slower selector matching
*/
/* ✓ Simplified (specificity: 0,0,1,0) */
.nav-link {
color: blue;
}
/* Benefits:
* - Low specificity
* - Easy to override
* - Structural independence
* - Faster matching
*/
Redundant Selectors
/* ❌ Redundant tag selector */
div.container { } /* Tag adds nothing useful */
span.text { }
/* ✓ Class alone is sufficient */
.container { }
.text { }
/* ❌ Redundant nesting */
.card .card-header .card-title { }
/* ✓ Flat BEM structure */
.card__title { }
Inspector Tools
Browser DevTools
Chrome/Edge DevTools:
1. Inspect element
2. Styles tab shows:
- Applied rules (from highest to lowest specificity)
- Crossed-out rules (overridden)
- Computed values
- Specificity on hover
3. Computed tab shows:
- Final computed values
- Which rule each property came from
Firefox DevTools:
- Shows specificity values inline
- Rule source (file and line number)
- Excellent Grid/Flexbox inspectors
- Override tracking
Specificity Calculator
Input: #header .nav .item a:hover
Breakdown:
- IDs: 1 (#header)
- Classes: 3 (.nav, .item, :hover)
- Elements: 1 (a)
Specificity: (0,1,3,1) or "0,1,3,1"
Decimal: 0131 (for comparison)
Common Specificity Issues
Issue 1: !important Wars
/* ❌ !important cascade */
.button {
color: blue !important;
}
.button-primary {
color: red !important; /* Must use !important to override */
}
/* ✓ Fix: Remove !important, use specificity */
.button {
color: blue;
}
.button--primary {
color: red; /* Overrides with higher specificity */
}
Issue 2: ID Over-specificity
/* ❌ ID selector too specific */
#header .button {
background: blue;
}
/* Very hard to override */
.button--primary {
background: red; /* Doesn't work! */
}
/* ✓ Fix: Use classes */
.header .button {
background: blue;
}
.button--primary {
background: red; /* Works! */
}
Issue 3: Deep Nesting
/* ❌ Deep nesting */
.container .row .col .card .header .title {
font-size: 1.5rem;
}
/* ✓ Fix: Use flat BEM */
.card__title {
font-size: 1.5rem;
}
Debugging Workflow
Step 1: Identify Applied Rules
/* In DevTools, see which rules apply */
.element {
color: blue; /* ✓ Applied */
}
.element {
color: red; /* ✗ Overridden (crossed out) */
}
Step 2: Check Specificity
Hover over selector in DevTools to see specificity:
.button → (0,0,1,0)
nav .button → (0,0,1,1)
#header .button → (0,1,1,0) ← Highest, wins
Step 3: Trace Inheritance
/* Check Computed tab */
body {
color: #333; /* Inherited by all descendants */
}
.card {
/* color: #333 (inherited from body) */
}
.card-title {
color: #000; /* Overrides inherited color */
}
Step 4: Identify Solution
Solutions ordered by preference:
1. Increase specificity of target rule
2. Decrease specificity of conflicting rule
3. Use :where() for zero specificity
4. Adjust source order
5. Use !important (last resort)
Specificity Best Practices
✓ Good Practices
- Keep specificity low and consistent
- Use single classes when possible
- Avoid IDs for styling
- Use BEM or similar methodology
- Use :where() for low-specificity utilities
- Document intentional high specificity
❌ Bad Practices
- Using !important to fix specificity
- Chaining multiple classes (.btn.btn-primary.btn-large)
- Deep nesting (.a .b .c .d .e)
- Mixing IDs and classes
- Inconsistent specificity levels
Example Analysis
You provide:
.container .card .title {
font-size: 1.5rem;
color: blue;
}
#featured .title {
color: red;
}
.title.large {
font-size: 2rem;
}
I'll analyze:
Specificity Analysis:
1. .container .card .title
Specificity: (0,0,3,0)
Properties: font-size, color
2. #featured .title
Specificity: (0,1,1,0) ← HIGHEST
Properties: color
Overrides: .container .card .title color
3. .title.large
Specificity: (0,0,2,0)
Properties: font-size
Doesn't override: .container .card .title font-size (lower specificity)
Final computed styles for <h2 class="title large"> inside .container .card:
- font-size: 1.5rem (from .container .card .title)
- color: blue (from .container .card .title)
Final computed styles for <h2 class="title large"> inside #featured:
- font-size: 1.5rem (from .container .card .title OR inherited)
- color: red (from #featured .title)
Recommendations:
1. Remove ID selector #featured, use .featured class
2. Flatten .container .card .title to .card__title
3. Use .title--large instead of .title.large for clarity
Just Ask!
Request CSS analysis:
- "Calculate specificity for #nav .menu .item"
- "Why isn't this CSS rule applying?"
- "Explain the cascade for this element"
- "Analyze these conflicting rules"
- "Show me the computed styles"
I'll explain how CSS rules interact!