CSS Refactoring

Chapter 6. Code Placement and Refactoring Strategies

We’ve learned a lot about CSS: how the cascade works, the different intents styles can have, how to write better CSS, and how to effectively test it. This chapter first discusses how to organize your styles and then explores strategies for how to best refactor your CSS using everything we’ve learned. Then we’ll wrap up by exploring how success can be measured after your code is refactored.

Organize CSS from Least Specific to Most Specific Styles

We learned in Chapter 2 that CSS styles are applied based on specificity and the order in which they are included. As such, it makes sense to organize your CSS in an order that is harmonious with how it will be applied:

1. Normalizing styles

2. Base styles

3. Styles for components and their containers

4. Structural styles

5. Utility styles

6. Browser-specific styles (if absolutely necessary)

This order includes CSS in such a way that as the declaration block selectors get more specific, more complicated selectors build off of the more general selectors that have already been included.

Here’s a refresher on what the different types of styles are used for. As you read through the intents of these styles, notice how they build upon each other.

Normalizing Styles

We learned in Chapter 4 that normalizing styles are used for providing a starting point that irons out some of the inconsistencies between browsers. With these inconsistencies out of the way, styles that follow can benefit from the ...