How Do You Name Your CSS Classes?

What’s Your Preferred CSS Class Naming Convention?

• BEM (Block Element Modifier)
• SMACSS (Scalable and Modular Architecture for CSS)
• OOCSS (Object-Oriented CSS)
• Atomic CSS
• Others

There are various naming conventions for CSS classes, each with its own advantages. What conventions do you use, and why do you prefer them?

Are you more of a dash (-) or underscore (_) person when naming CSS classes?

Comments

[𒎏Wii 🏳️‍⚧️]

I've been looking for a solid CSS convention for a while, but don't really like any of them.

• BEM is attrocious any anyone who uses it can't be my friend anymore.
• SMACSS is reasonable, but not really my cup of tea.
• OOCSS has OO in the name and is therefore automatically bad. It's also bad on its own merit too.
• Atomic CSS is the antithesis to good web architecture. It's diet style=, marketed to make you feel less bad about something that's still just as bad for you.

What I've personally landed on is an approach that emphasises short selectors with few conditions, reliance on custom properties and a general ideal of using as few "helper" classes as possible.

Generally speaking, I aim for the following:

• The tag name tells you what it is
• A class tells you what non-default type of thing it is
• An ID tells you that it is a unique special case on the page
• An attribute tells you that a certain parameter gets modified

To achieve this, I often make use of custom elements, which can be surprisingly convenient even without registering them in JavaScript.

For example, I might end up with HTML that looks like this:

<flex-column gap=2>
   <a class="button danger">Leave</a>
</flex-column>

• The flex-column tag tells you what the thing is much more quickly than seeing a <div> and having to filter through a long list of classes
• The gap=2 attribute communicates clearly that there is an attribute name and a value, unlike, say, a .gap-2 class, which takes some more focus to decipher.
• The link-specific button and generic danger utility classes don't really fit into any of the other categores, so they end up just being classes

What I wish I could do is communicate the difference between utility classes like .danger and those that really express a different class of whatever the tag represents, like .slider on a checkbox.

In the end, what I end up with is somewhere in between OO, Atomic and Axiomatic CSS. Apart from that, I mainly try keeping the number of element types low and not make up a dozen new elements for every page. Something I can get away with because there's no designer wanting this one particular button to have just a little bit more padding on desktop.

If you want some examples of what this ends up looking like in practice, feel free to have a look around this website for an (unfinished!) css library I'm working on.

[Jenna]

Hi Wii,

Thank you for sharing your approach! 😊
It is interesting how you use custom elements and attributes for clarity.
It's a nice blend of methodologies that keeps things simple and readable.
I'll check out your library for more ideas. 🌟👍

[Miko]

Always interesting to see other people's approaches. I can see merit in (and largely agree with!) most of what you said but in my experience, a combo of BEM/SuitCSS and OOCSS has worked best in large CSS codebases (without involving JS). I also sometimes use some Atomic classes as utilities/helpers, but try not to if possible. Sucks we can't be friends ;)

I try to keep HTML/tags/semantics and CSS/styles separate. Means that they're not coupled and I'm free to change component composition without directly messing with styles. I also try to add some semantic meaning to how classes are structured. Yes, there might be a little learning curve but it does add to code readability in the long run.

for context, i mainly work on UI for large applications with lots of developers working on it. If i had to build landing pages and websites that optimise for delivery and conversion rates, I might make different decisions :)

[Nicholas Stimpson]

Class naming is easy. Look at the content of the element and how it relates to the content of other elements on the same page. Where similarities are identified, give each element a class name that describes that similarity. Whenever possible avoid hyphens and underscores. Use spaces instead.

[Jenna]

Hi Nicholas,

Thanks for your comment!
CSS does not permit spaces in class names, so hyphens and underscores are commonly used. Could you clarify what you meant? 🤔

[Nicholas Stimpson]

Sure. I mean assign multiple classes to an element, separated by spaces. For example, instead of writing class="pets_kittens_white-playful", write class="pets kittens white playful". From an HTML standpoint, this is a semantic description or the contents. It says that the content on the element is about pets, is about kittens, is about things that are coloured white, and things that are playful. This is why the name "class" is used for the attribute, because it is classifying the HTML content in one or multiple ways.

Then in your CSS, selectors, you can easily combine them however you like .playful, or .pets.kittens or .kittens.playful.white etc. and exploit the power of specificity to your advantage to ensure the correct style is applied.

[Miko]

the good thing about this approach is that you can compose your classes in small utilities and you don't have to repeat yourself when writing your CSS. The challenging thing is that you risk clashes and you might have to fight the cascade unnecessarily. A little bit of semantic meaning or structure in your naming convention can go a long way, especially in a huge CSS file. Naming things is notoriously and deceptively hard :)

[Debajit Sarkar]

For smaller projects, hyphen-delimited naming. For large projects with multiple developers, BEM or SMACSS. BEM is a more structure convention and SMACSS helps with separation of concerns and keeps styles organized.

[Jenna]

Hi Debajit,

Thank you for sharing your approach! 👍
Naming small projects with hyphens and using BEM or SMACSS for larger ones makes sense.
BEM provides structure, while SMACSS helps with categorization.

[Peter Vivo]

others: I use tailwind skip naming process of CSS, just naming the component.