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.

3.1. Don’t talk much and stay DRY

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.

3.2. Mobile-first is user-first

3.3. Performance-tuning your CSS

3.4. Working with CSS transitions

3.5. Summary