8 Cascade layers and nesting
This chapter covers
- Organizing CSS in a logical manner
- Controlling the cascade using layers
- Using the
:is()and:where()pseudo-classes - Grouping related styles with nesting
In parts 1 and 2, we looked at the intricacies of CSS and the tools it provides for laying out elements on the page. We’ve made sense of the box model, margin collapsing, stacking contexts, flexbox, and grid. You’ll need these skills, particularly when you first set out on a new project. In the world of software development, however, there’s more to programming than just making your code work. It’s also important to organize code in a way that’s understandable and allows for future changes without making it more brittle. In CSS, this surfaces an entirely new set of difficulties.
In the past, the only way developers have been able to address these problems is with strictly prescribed methodologies and naming patterns, but CSS has some brand-new features to help us in this regard. These are first-class features that provide better means of code organization and explicit control over the cascade.