In programming the two difficult things are, in no order of importance, naming things and garbage collection. Everybody knows this. Right?

Naming things is so important for a lot of reasons:

  • Is it easy to read?
  • Can it be used in more settings than yours (if needed).
  • Can you explain it easily to new developers.
  • Will you know what the code does in 6 months time or next monday…

If you do CSS or something front end related you will certainly know that the actual most difficult thing is naming things. At least I am thinking right now as I just started on a project with loads of legacy code. I am currently browsing through the code and I am finding some beauties. The winner for now is:


Time to go and find a more sensible naming convention, any convention as long as we get more reasonable names. As I won’t put up with this for much longer. Actually the project is only in it’s 3th day for me.

There are loads of conventions about, smacss, oocss but my convention by choice is BEM.

So let’s get started, how are we going to change this behemoth of a name into something sensible? First up, let us look at what we are trying to achieve here in the first place.

We are trying to create a class name or names for an element that let’s us quickly see what it is, is flexible, is extensible and that is easier explained to new developers.

The current name doesn’t quite cut it, it is too long. It’s not flexible as it ties it down to a specific place on the page. Extending it makes it worse and explainable, don’t get me started…

We are trying to style a title of a link in a item of a list or dropdown needed for search in a form or wizard.


That is a lot for such a simple, but very long and terrible, name to do. So let’s break it up into smaller chunks maybe. After all, all we wanna do is style the title. Doing BEM we can chop the name into smaller pieces, making it easier to read and understand.

First we need to see what we are doing, it is about the title in a link, so let’s create a sensible name there…


See the ugly __ that seperate the two, that’s intentional, really. But let’s not stop there. We could say that being in a search box is something special and could result in some extra styling, so we also do:


In BEM we use the -- in front of the modifier. In the HTML we then would give the element both names, like:

    class="link__title link__title--search">
    link text

The reason for both classes is obvious, right:

.link__title {
    // do all the styling for generic dropdown titles
.link__title--search {
    // do extra stuff for a title in a search box

The entire code for this should be in a separate component obviously and so on, included in the list item which is pulled in by the dropdown which is used in the search form of the wizard. All of which could get sensible names, each using no more than two names for each of the parts. Some elements would have two or more classnames as we need to make a difference between generic elements and this specific implementation.

Something like this:

<div class="wizard wizard--search">
  <form class="wizard__form">
  <!-- more content -->
    <ul class="dropdown">
      <li class="dropdown__item">

        <a href="#" class="link">
          <span class="link__title link__title--search">Link text

      <!-- more items -->
    <!-- more content -->

This is far from perfect, but in my opinion it’s way better than before. We now have a series of shorter names that describe what happens more based on components and not the whole page.

We can move the component to another page and may have to change only one or two modifiers, that’s it.

If you want to read more about BEM and naming, maybe you can go and read some more on smashing magazine.

If you want to talk to me about this, hit me up on twitter and ask me anything.

And if you want me to talk about this at your event or company, ask away, I will be more than happy to come and rant for you :).