The Cascade is legendary. Legendary because it is the C in CSS. Legendary in how well it works to determine which selector wins when browsers apply styles to HTML. And legendary in how little many of us really know about it.
Bramus van Damme recently gave a fantastic talk about the Cascade at CSS Day. Whether you want to learn what the Cascade is and how it works or you already are familiar with it, watching this talk will be equally valuable for you. Bramus does a great job explaining the different steps of the Cascade and what specificity has to do with it in a way that you really understand it.
The six steps of the Cascade: origin and importance, context, style attributes, layers, specificity, and order of appearance.
He then goes on to show how the new concept of Cascade Layers works and what you can do with them. For example, they can be used to better separate the styles of a component library or third party components from the rest of your CSS. Cascade Layers are already supported by all modern browsers, so it is time to get familiar with them.
If you want to learn more about the Cascade and Cascade Layers, have a look at the slides from Bramus’ talk, his great blog post about Cascade Layers, and also the following articles:
Cascade layers are coming to your browser, Una Kravets
A Complete Guide to CSS Cascade Layers, Miriam Suzanne
Getting Started With CSS Cascade Layers, Stephanie Eckles
~
