Chapter 3. Optimizing CSS
This chapter covers
- Reducing the size of your CSS by taking advantage of shorthand CSS properties, using shallow CSS selectors, and implementing the DRY principle
- Segmenting your CSS by using unique page templates
- Understanding the importance of mobile-first responsive web design
- Knowing what makes a page mobile-friendly, and how this matters to Google search rankings
- Improving the performance of your CSS by avoiding bad practices and using higher-performing CSS selectors, the flexbox layout engine, and CSS transitions
Now that you’ve learned how to assess performance by using developer tools available in the browser, you can learn to optimize the various aspects of your websites. This starts with optimizing your CSS. In this chapter, you’ll learn to write efficient CSS, understand the importance of mobile-first responsive design, and gain tips for performance-tuning your CSS.
When you begin learning a new topic in the realm of web development, the first thought is, “What’s new and shiny?” Although the topic of web performance certainly brings new tools to the table for CSS, the best piece of advice is to be as terse as possible when you write CSS. Doing this requires no new tools, only the desire to learn terser expressions and the discipline to use them consistently.