Current State of CSS

Mar 01, 2020 • ☕️ 3 min read

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.


  • CSSOM - CSS Object Model implemented in pure JavaScript
  • PostCSS - Transforming styles with JS plugins


  • LESS - Backwards compatible with CSS
  • SaSS - Mature, stable, and powerful professional-grade CSS extension language.
  • Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
  • PostCSS - Transforming CSS with JS plugins.


  • Bootstrap - the most popular HTML, CSS, and JS framework.
  • Bulma - a modern CSS framework based on Flexbox
  • Foundation - advanced responsive front-end framework
  • Materialize - a modern responsive framework based on Material Design.
  • tailwindcss - a utility-first CSS framework for rapid UI development.


  • normalize.css - A set of CSS rules that default styling of HTML elements.
  • sanitize.css - A set of CSS rules that style with today’s best practices
  • reset.css - reset all browsers’ default styles that come with user agent



Reading More

Asynchronous programming in JavaScript

On the evolution of asynchronous programming style including callbacks, promises, and async/await

Become a Fullstack JavaScript Developer, Part 2: The Basics

Whether you are going to focus on frontend or backend, these are my curated list of knowledge or technologies you must master

The hype microservices. Should I switch to it?

Microservices is an architectural and organizational approach to software development where software is composed of small independent services

On Incompleteness of Prerendering

Prerendering is a rendering strategy when you pre-render your client-side rendered applications to feed crawlers better