Adopt a Design System

Overview

Like helpers, the problem with CSS is how to manage the volume of code. CSS, by its nature, makes the problem worse because of the way CSS can interact with itself and the markup. It’s not unheard of for a single line of CSS to break an entire website’s visuals.

When CSS is unmanaged, developer productivity can go down, and the app becomes less sustainable. There are two main factors that lead to this that we must control:

• Some CSS must be written for each new view or change to a view. The more required, the slower development will be.

• The more CSS that exists, the harder it is to locate reusable classes, which leads to both duplication and even more CSS. As with helpers, there is a volume at which no developer can reasonably understand all the CSS to locate reusable components, and the safest route is to add more CSS.

Therefore, to keep CSS from making our app unsustainable, we must manage the volume. Ideally, the rate of growth in CSS is lower than the rate of growth of the codebase. Thus, the more reusable CSS we have, the less CSS we’ll need. To achieve this, we need the following three things:

• A design system that specifies font sizes, spacing, and colors (among other things).

• A CSS strategy, which implements the design system but also provides a single mechanism for styling components and reusing them when needed.

• A style guide, which is a living document of our Design System and CSS Strategy.

The absolute biggest boon to any team in wrangling CSS is to adopt a design system.

A design system