[Go Make Things] Naming conventions for CSS classes

Monday, May 12, 2025

Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter.

I'm working on a UI library for people who love HTML and modern CSS, and one of the many details I'm currently sweating is naming conventions for CSS classes.

I'd love your feedback!

Colors and style

Let's say you have a button, and by default, it's gray with a dark background.

<button>Activate Me</button>

You want to change it to your primary brand color (blue), and use a light variation with dark text.

Would you rather write and maintain verbose HTML that looks like this…

<button class="color-primary style-light">  	Activate Me  </button>

Or more simple but possibly less obvious CSS classes that look like this…

<button class="primary light">  	Activate Me  </button>

I can see arguments for both, and I'm not sure which one is easier to maintain for developers in the long run.

Margins, padding, and other utility classes

The library also includes a bunch of utility classes for modifying various things: margin, padding, border radius, font size, and more.

For the most part, these follow a .{property}-{size} naming convention.

<p class="size-xl">Increased font size.</p>    <div class="callout border-radius-l">  	A callout with a bigger-than-normal border radius.  </div>

But where I'm feeling a bit stuck is around margins and padding.

Following that same pattern, the names can get a bit verbose. And unlike .border-radius-* or .aspect-ratio-*, in my own experience, margins and padding get adjusted a lot more in a design.

<div class="size-s margin-bottom-xs">This is a lead-in</div>  <h1 class="margin-bottom-l padding-top-s">This is a heading</h1>

Would you prefer the .margin-bottom-l style conventions for these, or an abbreviation-based system (like you see in Bootstrap and Tailwind)…

<div class="size-s mb-xs">This is a lead-in</div>  <h1 class="mb-l pt-s">This is a heading</h1>

One one hand, the brevity makes the HTML a lot more scannable and easier to write. On the other hand, it takes a lot more brain power to process what it does.

I want your opinion!

Do you like one style over the other? What's the right mix of CSS class authoring styles for you?

I really want to know what you think! Send me an email and let me know.

Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying.

ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25 or just use ConfigCat's generous free tier. Definitely worth checking out.

Like this? A Go Make Things membership is the best way to support my work and help me create more free content.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

.