Cascade Layers
Cascade Layers exist as a high-level tool to manage the grouping, and priority, of style rules. When writing CSS, I make a point of only using classes as the styling hooks to make my changes. To exemplify, if I need to style a button, I won’t do this:
button {
/* styles */
}As, when using element selectors, it isn’t possible to create a specificity equality across all the selectors. As soon as I want a different style button elsewhere, I would need to create a more specific selector to override the styles I have already created. Instead I would add a class to the button and do this:
.btn {
/* styles */
}If the nuance of why this is important when authoring projects is lost on you, I’d recommend either reading my shorter book, Enduring CSS, free online at https://ecss.benfrain.com or buy yourself an eBook/hardcopy.
However, there may certainly be scenarios where things aren’t entirely within your control. To give you a common scenario...
