Classless vs. class-based CSS design systems

Today, I wanted to talk about classless vs. class-based CSS design systems, boilerplates, and frameworks: how they differ, which approach I prefer, and so on.

Let’s dig in!

What is a classless design system?

A classless CSS design system, as the name implies, do not use classes. Instead, it provides base styles for native HTML elements.

One of the better known classless systems is Water.css.

With a system like this, you just load the stylesheet into your HTML file, then start writing code.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

<h1>Hello, world!</h1>
<p>How are you today?</p>

<ol>
	<li>I'm good</li>
	<li>I'm bad</li>
	<li>I'm so/so</li>
</ol>

What is a class-based design system?

With a class-based design system, almost no elements are styled by default, and everything requires a class.

One of the most popular class-based systems is Bootstrap.

Generally basic elements in this system don’t need classes, but some systems take the need for classes further than others. The US Web Design System (USWDS) (for United States Government projects) requires classes for lots of basic elements, including lists, forms, and so on.

<h1>Hello, world!</h1>
<p>How are you today?</p>

<ol class="usa-list">
	<li>I'm good</li>
	<li>I'm bad</li>
	<li>I'm so/so</li>
</ol>

Which one is “better”?

Both systems have their pros and cons.

I don’t like having to add classes to things like lists, forms, and buttons. I want those basic elements to be styled out-of-the-box when I’m coding. For that reason, classless systems have a lot of appeal.

But, they’re also pretty limited in terms of what they can do.

If you want to deviate from the base styles in any way, you’re going to start building your own components and utility classes. That’s not necessarily a bad thing! But they do come with fewer batteries included.

Class-based design systems give you a lot more flexibility and features out-of-the-box.

They often include lots of components you’ll typically use when building a website: inline lists for navigation elements, different types of button styles, alerts, icons, and so on.

But that also means they come with a lot of stuff you probably don’t need. And depending on the system, authoring even basic components can involve writing a lot of extra code.

I’m currently using USWDS for a project I’m working on for NASA (yes, that NASA).

It’s got great documentation and a big focus on accessibility. But need to add classes to all sorts of basic elements that aren’t really deviating from browser default all that much is tedious at times.

👋Quick aside: If you need help on your web projects, I offer consulting and development services. I’d love to work with you!

A hybrid approach

There’s a middle ground between classless and class-based design systems.

My favorite CSS boilerplates/frameworks/whatever include base styles for various HTML elements, some component styles for commonly used components (like nav menus and things), and some utility classes for nudging and tweaking the UI.

I don’t know if you’d call them classless+ or Class-based-lite or what, but they sit somewhere in the middle.

My own CSS boilerplate, Kraken, was designed to be a lightweight, more modular alternative to Bootstrap. It was heavily inspired by Skeleton.

The aim with these types of systems is to provide a great starting point that can be easily customized for whatever you’re trying to build.

Tomorrow, I’m going to talk about how I approach CSS architecture.