Current state of CSS

Updated on Mar 29, 2021cssadvanced-css

The CSS Working Group creates and defines CSS specifications. These specifications are assigned maturity levels as they move through the design process.

When the first CSS specification was published, all of CSS was contained in one document that defined CSS Level 1. CSS Level 2 was defined also by a single, multi-chapter document. However for CSS beyond Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and allows more immediate, incremental improvement to CSS.

The story of CSS over the past couple years is one of tremendous flexibility and adaptability. CSS may not be perfect, but it’s still managed to negotiate a smooth transition to a multitude of new devices, contexts, interaction modes, and accessibility requirements.

With features like Grid, we finally have the tools needed to specify complex layouts without requiring hacks and workarounds; while blend modes, masks, and shapes (among others) let us implement designs that are richer and more creative than ever.

Layout tools are one of the areas that have seen the most changes in recent years. First FlexBox came onto the scene, and then CSS Grid emerged as the most polyvalent and expressive way of handling CSS layouts.

For a long time, writing CSS was straightforward enough: add a .css extension to your file, open up a text editor, and start typing. But over the years, CSS has developed its own ecosystem of technologies, from preprocessors like Sass and Less to methodologies like BEM and Atomic CSS, to more recent developments like CSS-in-JS.

While BEM is ahead of the pack here, Atomic CSS is also starting to gain ground with its completely new utility-class-driven philosophy.

CSS-in-JS has been one of the biggest developments of the past few years in the CSS world. Just like preprocessors bypassed CSS to introduce their own set of new features over a decade ago, CSS-in-JS libraries piggyback on JavaScript’s power to make their own path without waiting for CSS to catch up.