This content originally appeared on Go Make Things and was authored by Go Make Things
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.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-05-12T14:30:00+00:00) Naming conventions for CSS classes. Retrieved from https://www.scien.cx/2025/05/12/naming-conventions-for-css-classes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.