# Day 37: cascade layers

DevFeed: [Day 37: cascade layers](<https://devfeed.tech/articles/day-37-cascade-layers-52205.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2022/100daysof-day37>)

Author: Manuel Matuzović

Published: 2022-11-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [selectors](<https://devfeed.tech/topics/selectors.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [cascade](<https://devfeed.tech/tags/cascade.md>), [css](<https://devfeed.tech/tags/css.md>), [layer](<https://devfeed.tech/tags/layer.md>), [rules](<https://devfeed.tech/tags/rules.md>), [selector](<https://devfeed.tech/tags/selector.md>), [specificity](<https://devfeed.tech/tags/specificity.md>)

## AI overview

A CSS tutorial explaining how cascade layers manage specificity and help later component styles override base styles. It also compares using !important, increasing selector specificity, and :where().

## Source excerpt

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%); } E-mail 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 dif