We can apply CSS to a specific element by targeting it with a unique selector.
We can also apply styles broadly that are inherited by child elements, such as color.
The page HTML is a hierarchy that defines these parent/child relationships.
Constructing the page HTML with knowledge of the layers you're working in will help create maintainable CSS.
!important
If a css rule is being overridden, but you don't want to allow it, add important! at the end of the line.
.link {
color: green !important;
}
Most specific
A css target that is more specifically targetting an element will override one that is more broadly applied.
<div class="container"><div class="block">Block container</div></div>
In this case, using .container .block {color: green} would overrule .block {color: red}.
Load order
When multiple css files are loaded, you get conflicting styles applying to the same target. In this case, the file loaded last
@layer
New CSS layers.
- Layers are processed before unlayered css.
- Higher priority layers override selectors, regardless of specificity.
What's the strategy for using layers in a project?
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Casc…