~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/13css-specificity

# CSS Specificity & Cascade

Specificity determines which CSS rule wins when multiple rules target the same element. Understanding this prevents frustration.

## The Cascade

CSS stands for **Cascading** Style Sheets. Rules cascade based on:

1. **Source order** — Later rules win
2. **Specificity** — More specific rules win
3. **Importance** — !important overrides everything

## Specificity Hierarchy

From lowest to highest:

```
1. Element selectors (p, div, span)          → 1 point
2. Class selectors (.class)                  → 10 points
3. ID selectors (#id)                        → 100 points
4. Inline styles (style="")                 → 1000 points
5. !important                               → Overrides all
```

## Specificity Examples

```css
/* Specificity: 1 */
p {
  color: black;
}

/* Specificity: 10 */
.text {
  color: blue;
}

/* Specificity: 100 */
#main {
  color: red;
}

/* Specificity: 1000 */
<p style="color: green;">Inline style</p>
```

**Result:** Green (inline wins)

## Calculating Specificity

```css
/* Specificity: 1 (element) */
p { }

/* Specificity: 10 (class) */
.text { }

/* Specificity: 10 (class + class) */
.text.highlight { }

/* Specificity: 100 (ID) */
#header { }

/* Specificity: 110 (ID + class) */
#header .nav { }

/* Specificity: 101 (ID + element) */
#header p { }

/* Specificity: 120 (ID + class + class) */
#header .nav.active { }

/* Specificity: 121 (ID + class + element) */
#header .nav p { }
```

## Source Order

When specificity is equal, later rules win:

```css
/* First rule */
.button {
  background-color: blue;
}

/* Second rule (wins) */
.button {
  background-color: red;
}
```

## Inheritance

Some properties inherit from parent:

```css
/* Inherited properties */
body {
  color: #333;           /* Children inherit this */
  font-family: Arial;    /* Children inherit this */
  font-size: 16px;       /* Children inherit this */
  line-height: 1.6;      /* Children inherit this */
  text-align: left;      /* Children inherit this */
  visibility: visible;   /* Children inherit this */
}

/* Non-inherited properties */
div {
  width: 100px;          /* Children don't inherit */
  padding: 20px;         /* Children don't inherit */
  border: 1px solid;     /* Children don't inherit */
  margin: 10px;          /* Children don't inherit */
  background: white;     /* Children don't inherit */
}
```

### Force Inheritance

```css
/* Force inheritance */
.child {
  color: inherit;        /* Inherit from parent */
  font-size: inherit;    /* Inherit from parent */
}

/* Reset to initial value */
.element {
  color: initial;        /* Reset to browser default */
}

/* Unset (inherit or initial based on property) */
.element {
  color: unset;
}
```

## !important

Overrides all specificity:

```css
/* Normal rule */
.button {
  background-color: blue;
}

/* !important wins */
.button.urgent {
  background-color: red !important;
}
```

**Avoid !important** — Makes CSS hard to maintain.

## Specificity Conflicts

### Problem: Specificity Wars

```css
/* Low specificity */
.text {
  color: blue;
}

/* Higher specificity (wins) */
.sidebar .text {
  color: red;
}

/* Even higher specificity */
#sidebar .text {
  color: green;
}
```

### Solution: Use Classes

```css
/* Good: Consistent specificity */
.text {
  color: blue;
}

.text-primary {
  color: red;
}

.text-secondary {
  color: green;
}
```

## Complete Example: Organizing CSS

```css
/* 1. Reset/Normalize */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. Base styles (low specificity) */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3 {
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* 3. Component styles (medium specificity) */
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card-text {
  color: #666;
}

/* 4. Utility classes (higher specificity) */
.text-center {
  text-align: center;
}

.text-primary {
  color: #3498db;
}

.mb-0 {
  margin-bottom: 0;
}

/* 5. State styles (highest specificity) */
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card.active {
  border-color: #3498db;
}
```

## BEM Methodology

BEM (Block Element Modifier) controls specificity:

```css
/* Block */
.card { }

/* Element */
.card__title { }
.card__text { }

/* Modifier */
.card--primary { }
.card__title--large { }
```

**Specificity is always 10-20** — Prevents specificity wars.

## Complete Example: Specificity in Action

```css
/* Specificity: 1 */
p {
  color: #333;
}

/* Specificity: 10 */
.intro {
  color: #3498db;
}

/* Specificity: 100 */
#main-content {
  color: #2ecc71;
}

/* Specificity: 110 */
#main-content .intro {
  color: #e74c3c;
}

/* Specificity: 101 */
#main-content p {
  color: #9b59b6;
}
```

```html
<div id="main-content">
  <p class="intro">This text is red (specificity 110)</p>
</div>
```

## Debugging Specificity

### Browser DevTools

Right-click element → Inspect → See which rules apply

### Specificity Calculator

```css
/* Use this to calculate */
/* Element: 1 */
/* Class: 10 */
/* ID: 100 */
/* Inline: 1000 */
```

## Best Practices

1. **Keep specificity low** — Easier to override
2. **Use classes over IDs** — More reusable
3. **Avoid !important** — Use specificity instead
4. **Follow CSS order** — Base → Components → Utilities → States
5. **Use BEM naming** — Consistent specificity

## Common Mistakes

1. **Using !important everywhere** — Creates specificity wars
2. **Overly specific selectors** — `#main > div > ul > li > a`
3. **Not understanding inheritance** — Some properties inherit, some don't
4. **Ignoring source order** — Later rules win when specificity is equal
5. **Mixing methodologies** — Stick to one approach

No changes yet

cancel