Headache of giving names

It doesn’t have to be like this … but it is often!

What I particularly find hard in development is invention of names for classes. I know this may sound silly (at least for someone who doesn’t work that much with CSS) but it is the tricky part.

Usually, we (developers) start every project pretty optimistic, believing that all will go smooth and as planned. But once you dig deeper into ocean, you start to find troubles. And some of the troubles are names given to your elements - classes.

I won’t mention here ID’s since if you are good developer you won’t even think to use ID to style elements, so in my world, there’s no ID in CSS. Period.

What can be done?

There are a lot of methodologies invented to solve this everlasting question, and none is either right or wrong. None is either better or the ultimate solution and that is something that has to be understood. In my opinion, good thing is what works for you in this very moment. I grew pretty tired of countless promises and thinking that some approach would work in distant future too, so using certain technology would give you future compatibility. Nop, it won’t.

Anyway, there are few ways you can approach problem with giving classnames.

  1. Use some of methodologies like BEM (Block, Element, Modifier), OOCSS (Object-Oriented CSS) or SMACSS. (Scalable and Modular Architecture for CSS). Speaking of them, one thing I really like is that all of them bring a kind of system and prevent chaos so they really help. Also, I find that this kind of system helps teamwork and it can be great for a start of team collaboration. What I dislike and why I never adopt in full any of mentioned is that you have to invest effort and bend your mind to start to think in this way.
  2. Invent and use your own system (saying “own” doesn’t have to mean your own, but can be addressed to whole team). In my opinion this is the best way, but you have to be aware that you will spend some time reinventing the wheel. At least, it is funny, too!
  3. Write fairly random classnames and don’t give a cake about methodologies until it works for you. Ok, this approach doesn’t sound like best solution but it does the work. Be honest, all of us started our career with this or even greater crimes and we’re still alive. Of course, couple of times I did hit the wall when I opened old project and hated my-past-self for choices, but, that’s fixed and I learnt from that.

My way

After more than decade in breaking my head over what is good or bad, right or wrong, I came to solution that I use today. I don’t have illusions that’s perfect way and I’m happy to see it changing everyday.

My current system of giving classnames is connected with Sass I massively use. I adopt something like “BEM-ish”. Ok, why not BEM? I don’t like to break my head over thinking what is the nature/state/purpose of the element. I do love philosophy and all kind of thinking but I’m trying to leave it out of code. Also, I’m frightened of that “__” in CSS. Sorry.

So, how does my system work. Simple, I like to chain “parent-element-another-element” and in that way I don’t have to think to much about nature/purpose of child element. Here’s an example:

<div class="header">
<div class="header-content">
<div class="header-content-logo">
Here's my logo!
</div>
</div>
</div>

And in Sass I will have something like this:

.header {
&-content {
&-logo {
color: magenta;
}
}
}

You get an idea. In this way I avoid element nesting elements and have eternal “parent-child” issue. Of course, this ways also couples parents and children, but I always get element targeted by one class and avoid nesting it to another element (parent).

The issue with this way is that your classname can become pretty long if you are not careful, since nesting in Sass is particulary sweet and tempting (been there many times!).

One of the greatest perks of this approach is that all of my code that belongs to let say “header” exists at only one place and everything will be inside of “.header {}” scope (speaking about Sass). Of course, there are situations when you need to extend this and make adjustments but if you are careful and wise enough, you can run pretty much long in this way.


That’s it. Let me know what do you mean and how you chose names for elements.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.