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 use an isolated element selector as a styling hook like this:

button {
    /* styles */
}

This is because, 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 will 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 reading my shorter book, Enduring CSS, free online at https://ecss.benfrain.com (or buy yourself an eBook/hardcopy).

However, there may be scenarios...