This content originally appeared on Manuel Matuzović - 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. :)
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-15T00:00:00+00:00) Day 37: cascade layers. Retrieved from https://www.scien.cx/2022/11/15/day-37-cascade-layers-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.