CSS Motivation

Some people with a lot of experience with big CSS seem to be consolidating around an approach to writing CSS that makes it easier to understand and use. This page describes our interpretation of this "new" approach, and has links to other readings. For our specific guidelines and advice, see the guidelines and advice page.

One common aspect of the "new" approach is the idea that the HTML file contains the content (obviously) and the content is formatted by classes applied to the HTML elements. To change the formatting, you change the classes that are applied to the HTML, rather than changing the CSS. As Nicolas Gallagher says at the end of his article: "anyone can rearrange pre-built “lego blocks”; it turns out that no one can perform CSS-alchemy."

This approach is explicitly moving away from the idea of "semantic CSS": That classes (or IDs) identified the type of content, and the CSS was written to format the content depending on where it appeared. While this idea seemed attractive when first put forward, in experience it has led CSS that's difficult to understand, and therefore difficult to maintain.

The original articles are easy to read and explain much better than I can:

• http://mrmrs.io/writing/2016/03/24/scalable-css/. Summarizes the philosophical underpinnings for the new approach
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/. Some concrete examples of what to do. Links to what other people are doing
• https://github.com/stubbornella/oocss/wiki. Object Oriented CSS. Attempting to make reusable pieces
• https://smacss.com/. Categorizes CSS and gives useful guidelines about how to organize your CSS files so you can find the CSS you're looking for
• http://getbem.com/introduction/. Another approach that also has links to the above and a couple more approaches