The CSS Cascade, a deep dive
summary
Explains the cascade as a six‑step algorithm with a new layer step inserted before specificity and order‑of‑appearance, shows how to use @layer and the top‑of‑stylesheet layer order declaration, demonstrates that reusing layer names merges contents while anonymous layers do not, and that unlayered styles get ultimate priority. Gives browser support (Chromium/Chrome 99, Firefox 97, Safari 15.4), demos @import/@layer linking, the postcss polyfill for older browsers, and a bramus/specificity npm package for exact specificity math.
AI-written summary · about
chapters (14)
- 0:00Start
- 3:53The CSS Cascade is the algorithm that determines the winner from a group of competing declarations
- 13:28Specificity
- 17:15ul li:is #highlighted, .active
- 23:07Introducing Cascade Layers
- 26:46With Cascade Layers you get to slice up single-origin styles in several layers, and control the priority of each layer
- 31:22Anonymous Layers
- 31:43Predefine Layer Order
- 32:09@layer Statement
- 32:53External CSS Files
- 35:05Layer Nesting
- 37:19Old Browsers
- 39:41Practical Application of Cascade Layers
- 40:45Summary
