Components at Scale: Deciding on a Style System

Build a styling system that scales well with the size of your codebase

Style systems are essential for development and design teams who need to scale, improve efficiency, and create consistent components.

You can easily imagine different teams working on multiple parts of a project for a long time. How do we bring order to the style chaos that ensues — stopping inconsistencies from creeping into the product and technical debt from spiraling out of control?

To do that, we need a consistent style system, and that's what we’ll look at next.

A Brief History

In order to understand style systems, let’s look at a brief history of CSS.

CSS was first proposed in the '90s and was essentially one large style sheet. It was great, but it didn’t take much to turn it into a disorganized mess since the cascading structure didn't lend itself well to consistent patterns and repeating styles.

SASS transformed CSS into a decent programming language in the form of a preprocessing engine that implements nesting, variables, mixins, extends, and logic into style sheets.

Awesome — it was a powerful tool that opened up a lot of different avenues. However…