Day 37: cascade layers

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

Cascade layers introduce a new way of managing specificity in CSS.

Let’s say we’re using a combination of a tag and an attribute selector for styling e-mail input fields. This declaration is part of our base stylesheet and comes early in the stylesheet. Later in the document, we want to use a class to overwrite parts of the base styling:

input[type="text"],
input[type="email"] {
  border-color: hwb(0 0% 0%);
  border-style: solid;
  border-width: 3px;
}

.form-item {
  border-color: hwb(120 0% 40%);
}

This won’t work because input[type="email"] is more specific than .form-item .
There are several ways to work around that.

Using !important

We could use !important, but we all know that this probably isn’t the best idea in the long term.

input[type="text"],
input[type="email"] {
  border-color:hwb(0 0% 0%);
  border-style: solid;
  border-width: 3px;
}

.form-item {
  border-color: hwb(120 0% 40%) !important;
}

Increasing selector specificity

We could increase the specificity of the second selector.

input[type="text"],
input[type="email"] {
  border-color:hwb(0 0% 0%);
  border-style: solid;
  border-width: 3px;
}

.form-item.form-item {
  border-color: hwb(120 0% 40%);
}

This works, but isn't the most beautiful solution either.

Decreasing selector specificity

We could decrease the specificity of the first selector.

input:where([type="text"], [type="email"]) {
  border-color:hwb(0 0% 0%);
  border-style: solid;
  border-width: 3px;
}

.form-item {
  border-color: hwb(120 0% 40%);
}

Using :where() to decrease specificity is a nice solution, and it works great if you only have a handful of selectors, but if you have a group of different selectors that you want on the same level in terms of specificity, there’s a more convenient way to do that.

Cascade layers

Cascade layers give us more control over the cascade. Using the @layer at-rule we can establish our own layers of the cascade. The rules of specificity we already know still apply within each layer, but there are no conflicts between rules in different layers because rules in a layer with higher priority always* win over rules in a layer with lower priority no matter how specific selectors are.

*Okay, not always, but we'll talk about that in another post.

@layer base {
  input[type="text"],
  input[type="email"] {
    border-color:hwb(0 0% 0%);
    border-style: solid;
    border-width: 3px;
  }
}

@layer component {
  .form-item {
    border-color: hwb(120 0% 40%);
  }
}

The specificity of .form-item is still lower than the specificity of input[type="email"], but .form-item is in the component layer, which comes later in the document and thus overwrites styles in the base layer.

There’s a lot more to say about cascade layers, but I’ll save that for later. :)

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 (2022-11-15T09:38:54+00:00) Day 37: cascade layers. Retrieved from https://www.scien.cx/2022/11/15/day-37-cascade-layers/

MLA

" » Day 37: cascade layers." Manuel Matuzović | Sciencx - Tuesday November 15, 2022, https://www.scien.cx/2022/11/15/day-37-cascade-layers/

HARVARD

Manuel Matuzović | Sciencx Tuesday November 15, 2022 » Day 37: cascade layers., viewed ,<https://www.scien.cx/2022/11/15/day-37-cascade-layers/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 37: cascade layers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/15/day-37-cascade-layers/

CHICAGO

" » Day 37: cascade layers." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/11/15/day-37-cascade-layers/

IEEE

" » Day 37: cascade layers." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/11/15/day-37-cascade-layers/. [Accessed: ]

rf:citation

» Day 37: cascade layers | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/11/15/day-37-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.