Advanced CSS Best Practices

Advanced CSS covers a wide variety of topics, so this section of our Advanced CSS Hub provides guides for the core concepts. You can skip or dip into each guide as necessary.

You may have endured float frustration for years, but browsers finally offer a declarative way to define layouts. Flexbox has been a good option for several years, but the era of CSS Grid has also arrived. We finally have a powerful way to create resilient layouts that can adjust to differing viewport environments without requiring media queries.

With the layout done, you can start having fun with CSS animations. CSS can — and generally should — be used to handle the simpler effects required in modern web pages. Combining animations with 2D transformations enhances the possibilities and performance. You can impress clients further with 3D transformation effects.

Variables have arrived in CSS — officially known as “custom properties”. Preprocessors such as Sass provide compiled variables, but native browser support offers additional possibilities — and we provide an introduction to CSS variables, showing how they make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

As sites get larger, it’s essential to consider the “structure” of your stylesheets. We cover two popular methodologies for naming things in CSS: BEM and Atomic CSS.

Moving to the cutting edge of browser evolution, the latest applications support variable fonts and scroll snap:

  • variable fonts are single font files that are able to behave like multiple fonts, offering an infinite range of weights and styles, and saving bandwidth for end users.
  • scroll snap is a native way to “snap” an element to its container when scrolled. Annoying carousels can be developed with minimal JavaScript!

Despite Scalable Vector Graphics being a decades-old technology, their power has only recently become apparent. The possibilities go further when SVGs are used in conjunction with media queries.

If you’d prefer to hold a book in your hand, check out CSS Master, recently updated to include the latest advances in CSS. Or perhaps check out our video course on mastering CSS layouts with Flexbox. You can see links to further books and courses below.

Further Learning

This Advanced CSS hub also offers a series of Tutorials for taking your CSS skills to the next level, as well as introductions to a range of CSS Tools and Resources for debugging your CSS code and optimizing your CSS performance.