This chapter covers
- Emerging problems as a project grows
- Organizing CSS into modules
- Preventing escalating selector specificity
- Surveying popular CSS methodologies
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, floats, and flexbox. You’ll need these skills, particularly when you first set out on a new project. In the world of software development, however, you’ll spend a great deal of time not only writing new code, but also updating and adding to existing code. In CSS, this brings with it an entirely new set of difficulties.
When you make changes to an existing stylesheet, those changes can affect any number of elements on any number of pages across your site. There’s an old joke: two CSS properties walk into a bar; a barstool in a different bar falls over. So, how do you ensure your change applies to all the places you want updated? And, how do you know your change won’t affect elements you don’t want changed?