This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

In order to understand how !important works in cascade layers, you have to understand how !important works generally. The conclusion of this post might not be what you expect.

The basics

Let's start nice and easy. We have two declarations with the same specificity. The second one wins because it comes later in the document.

h1 {
  color: green;
}

h1 {
  color: red;
}

Adding !important to the first declaration increases its specificity, turning the color green.

h1 {
  color: green !important;
}

h1 {
  color: red;
}

So far, so good. I assume that most of you already knew that. Now let’s have a look at cascade layers and what happens if we use !important in layers.

Layers

We have two layers, each with a declaration with the same specificity. The second declaration wins because it’s in a layer defined later in the document.

@layer base {
  h1 {
    color: green;
  }
}

@layer components {
  h1 {
    color: red;
  }
}

If we add un-layered styles, the color turns blue because un-layered styles have precedence over layered styles.

h1 {
  color: blue;
}

@layer base {
  h1 {
    color: green;
  }
}

@layer components {
  h1 {
    color: red;
  }
}

If we add !important to the declaration in the base layer, the color turns green.

h1 {
  color: blue;
}

@layer base {
  h1 {
    color: green !important;
  }
}

@layer components {
  h1 {
    color: red;
  }
}

Okay, I have to stop here for a moment. All this makes sense to me. Here’s what I thought happens before I wrote this blog post:

By default, our order of precedence is like this:

1. Un-layered styles (most important)
2. components layer
3. base layer (least important)

Demo 3 and 4 confirm that.

If we add !important to the declaration in the base layer, our order looks like this:

1. !important base layer (most important)
2. Un-layered styles
3. components layer
4. base layer (least important)

Demo 5 confirms that.

If I keep extending my logic, this would mean that if we add !important to the components layer, the order looks like this:

1. !important components layer (most important)
2. !important base layer
3. Un-layered styles
4. components layer
5. base layer(least important)

Let’s try!

h1 {
  color: blue;
}

@layer base {
  h1 {
    color: green !important;
  }
}

@layer components {
  h1 {
    color: red !important;
  }
}

Nooope, not red, still green. To explain why, let's have a look at the spec.

“CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet, which override those in the user-agent’s default style sheet. To balance this, a declaration can be marked important, which increases its weight in the cascade and inverts the order of precedence” (emphasis mine).

CSS Cascading and Inheritance Level 3

This means that !important doesn't just increase the weight of a declaration in the cascade, but it inverts the order of precedence. So, in our first basic example !important doesn't just make the first declaration more important, no, it inverts the order of precedence!

h1 {
  color: green !important;
}

h1 {
  color: red;
}

If we make the first declaration important, this…

1. h1 color red (most important)
2. h1 color green (least important)

…becomes this:

1. h1 color green (most important)
2. h1 color red (least important)

Before cascade layers, this didn’t really matter, but now, with multiple layers on the author level, understanding this concept is critical. If we apply this logic to our last layer example, we get this:

1. !important base layer (most important)
2. !important components layer
3. !important un-layered styles
4. Un-layered styles
5. components layer
6. base layer(least important)

So, even if we add !important to the un-layered styles, the declaration in the base layer still wins.

h1 {
  color: blue !important;
}

@layer base {
  h1 {
    color: green !important;
  }
}

@layer components {
  h1 {
    color: red !important;
  }
}

Got it? No? Don't worry. It took me more than an hour to understand it. This video by Una Kravets helped a lot:

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-05T09:38:54+00:00) Day 74: using !important in cascade layers. Retrieved from https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/

MLA

" » Day 74: using !important in cascade layers." Manuel Matuzović | Sciencx - Thursday January 5, 2023, https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/

HARVARD

Manuel Matuzović | Sciencx Thursday January 5, 2023 » Day 74: using !important in cascade layers., viewed ,<https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 74: using !important in cascade layers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/

CHICAGO

" » Day 74: using !important in cascade layers." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/

IEEE

" » Day 74: using !important in cascade layers." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/. [Accessed: ]

rf:citation

» Day 74: using !important in cascade layers | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/05/day-74-using-important-in-cascade-layers/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.