- **Epistemic status:** #budding
[[Cascading Style Sheets (CSS)]] helps reduce cascade problems with styles by providing a structured way of organizing and balancing from defined cascade systems. You can create layers that represent defaults, third-party libraries, themes, components, overrides, etc. After that, you can reorder the cascade layers without altering selectors or specificity within each layer, reducing the need to rely on the source order to resolve conflicts.
## Defining your own layer
To define your own layer, you can use the `@layer` at-rule. You can then define layered `@imports` building from low-priority styles like resets and defaults, through themes, frameworks, and design systems, up to highest-priority styles, like components, utilities, and overrides.
```css
@layer reset {
body {
line-height: 1;
}
}
```
## Layer specificity
Layered styles are less important than un-layered styles because they get ordered and grouped in such a way to avoid scaling them like specificity and importance can. The specificity that conflicts between layers will be resolved on which is using the highest-priority layer. When using `!important` on cascade layers, you need to be more cautious since it can make lower layers overwrite styles on upper layers. Let's see an example of this behavior.
Imagine we have the layers mentioned above, from most powerful to least powerful:
1. overrides
2. utilities
3. components
4. theme
5. default
6. reset
When you add `!important` in the styles of a layer, in this example our reset layer would generate reversed important layers:
1. !important reset
2. !important default
3. !important theme
4. !important components
5. !important utilities
6. !important overrides
7. overrides
8. utilities
9. components
10. theme
11. default
12. reset
## Specifying a layer order
Layers stack in the order they first appear, from least powerful to most powerful, and can be used multiple times through the codebase. Un-layered styles have the highest priority.
```css
/* Least powerful */
@layer layer-1 {
button {
background-color: red;
}
}
@layer layer-2 {
button {
background-color: blue;
}
}
@layer layer-3 {
button {
background-color: green;
}
}
/* un-layered - Most powerful */
button {
background-color: black;
}
```
Layers can also be nested, allowing for more complexity. Nested layers get rendered together with the parent layer. You can think of it as if it flattens the list.
```css
/* Least powerful */
@layer layer-1 {
button {
background-color: red;
}
}
@layer layer-2 {
button {
background-color: blue;
}
}
/* Most powerful */
@layer layer-3 {
/* Least powerful */
@layer sub-layer-1 {
button {
background-color: green;
}
}
@layer sub-layer-2 {
button {
background-color: red;
}
}
/* un-layered - Most powerful */
button {
background-color: black;
}
}
```
The good thing is that you don't need to include all the styles of a layer in one location. You can define it initially in a single location for establishing the layer order, and then append styles from anywhere:
```css
@layer layer-2;
@layer layer-2 {
button {
background-color: blue;
}
}
```
You can even declare multiple layers in a single declaration:
```css
@layer overrides, utilities, themes, etc
```
By providing the layer order upfront, you can add a third-party library without worrying about how it would affect your layers, since it gives you the control to decide how:
```css
/* styles imported into to the <layer-name> layer */
@import url('https://cdn.jsdelivr.net/npm/
[email protected]/css/bulma.min.css') layer(bulma);
```
## Use cases
### Managing a complex project
As projects grow and become complex, having defined clear boundaries of naming and organizing [[CSS Cascade Layers]] makes thing easier to manage conflicts in the long run. At the very top of your [[CSS Cascade Layers]] you can define the layers following this example:
```css
@layer
reset,
default,
themes,
patterns,
layouts,
components,
utilities;
```
### Adding a third-party tool, library, or framework
When integrating styles from third-parties, you can't control the specificity of how those are managed, forcing you to structure your internal [[CSS Cascade Layers]] code around the third party. With layers you can remedy this situation by defining where and how you want them to alter your site, making it easier to know which styles will take priority over others.
### Reducing the need for !important
`!important` is a great tool, but when used a few times in the codebase, it can become difficult to work around those styles. By organizing the code in layers, it reduces the need to use `!important` since you will define the layer importance early on.
---
## References
- CSS-Tricks. “A Complete Guide to CSS Cascade Layers,” February 21, 2022. <https://css-tricks.com/css-cascade-layers/>.
- “CSS Cascading and Inheritance Level 5.” Accessed March 4, 2022. <https://www.w3.org/TR/css-cascade-5/#layering>.
- “CSS Tools: Reset CSS.” Accessed March 4, 2022. <https://meyerweb.com/eric/tools/css/reset/>.
- “@layer - CSS: Cascading Style Sheets | MDN.” Accessed March 10, 2022. <https://developer.mozilla.org/en-US/docs/Web/CSS/@layer>.