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.

Parsers

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

Preprocessors

  • 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.

Frameworks

  • 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.

Resets

  • 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

Methodologies

CSS-in-JS

Reading More

JavaScript Static Type Checkers

Using static type checkers like Flow or TypeScript can greatly improve the safety of your JavaScript code

How to become Javascript Fullstack Developer in 2019

If you want to become a Full-Stack Web Developer in 2019 and land your first job, below is a reference guide with a list of things you should learn.

Beloved CSS Frameworks

Pros and cons of using CSS frameworks like Bootstrap, Foundation, Materialize CSS, Semantic UI, Tailwind, Ant Design

Become a Fullstack JavaScript Developer, Part 1: The Motivation

The motivation behind my decision to become a fullstack one and whether should you