Hug CSS, how I approach CSS architecture

Yesterday, I wrote about classless vs. class-based CSS design systems. In the article, I noted…

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.

Today, I wanted to talk about how I approach CSS architecture in my own projects. Let’s dig in!

The Approach

I use the following approach with all of the CSS projects I work on…

1. Classless HTML for the core styles.
2. Utility classes to nudge and tweak elements when needed.
3. Group classes to simplify styling collections of elements that may have more complex needs.

To recap, that’s HTML, Utility, Group, or HUG CSS.

HTML core styles

I apply my default styles directly to HTML elements.

Here’s a simplified example…

This let’s me author my HTML without the need to drop classes on everything…

Utility classes

The default HTML styles work great a majority of the time. But designs often call for deviations from the standard presentation.

I really like utility classes for this. A utility class is a class that typically modifies just one or two properties on an element.

For example, imagine that by default my headings to have a good amount of bottom margin, but part of my design requires a heading and paragraph with no space between them.

I can write a .no-margin-bottom utility class that overrides any default margin-bottom property.

I have a few dozen little classes I can use to adjust the font, padding, margin, and color of various elements in my UI.

Group classes

Sometimes, you have a collection of elements that requires slightly more complex styling.

You could use a collection of utility classes for that, but I find creating a group class is just more practical.

For example, let’s imagine we want to convert a standard unordered list (ul) to display the items horizontally and without bullets. We could use a collection of utility functions for that.

This is what a lot folks refer to as the “Tailwind-style” of authoring CSS. It works, and can be nice for quickly prototyping things, but it’s really clunky to work with in the long term.

For something like this, I have a .list-inline group class that does the same thing with a single class.

You may notice that having a group class also makes it a lot more clear what’s actually going on with that particular piece of HTML.

You can also create utility classes to nudge and tweak your group classes if needed.

For example, I have a few .list-inline-* classes that adjust the amount of spacing between list items.

Utility “classes” don’t always have to be classes

Interactive elements in a UI often have attributes that change based on the element’s state.

For example, a button with active and inactivate states should have an [aria-pressed] attribute with a value of true or false, respectively.

I will often use the attribute rather than a separate class to control styling.

This removes the need for JavaScript to manage a state attribute and a class, reducing the likelihood of an expected bug.

Quick recap

To summarize…

1. Classless HTML for the core styles.
2. Utility classes to nudge and tweak elements when needed.
3. Group classes to simplify styling collections of elements that may have more complex needs.

That’s HTML, Utility, Group, or HUG CSS.