• CSS Architecture
• Last updated on January 14, 2018

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.

<!-- An inline list? -->
<ul class="list-style-none display-flex flex-gap flex-center flex-wrap">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

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.

.list-inline {
	list-style: none;
	display: flex;
	align-items: center;
	column-gap: 1em;
	flex-wrap: wrap;
}

<!-- An inline list -->
<ul class="list-inline">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

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.

.list-inline-spaced {
	column-gap: 2.875em;
}

.list-inline-compact {
	column-gap: 0.5em;
}

<!-- An inline list with a bit more space between items -->
<ul class="list-inline list-inline-spaced">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>