Best practice for CSS class naming for use with jQuery selectors

Question

While building a Javascript-heavy web application, what is the best practice for naming CSS classes to keep the Javascript code and CSS stylesheets clean and the UI structure flexible?

---

Option 1: Name every single element uniquely.

For example,

// HTML
<div id="list">
  <button class="list-delete" />
  <div class="list-items">
    <div class="item">
      <button class="item-delete" />
      <h1 class="item-name">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript
$(".list-delete").show();
$(".item-delete").hide();

Pros:

• Selecting an item for styling or JS manipulation is easy

Cons:

• Element names start becoming really long and hard to keep track of
• Changing the HTML structure requires lots of renaming

---

Option 2: Name every element semantically, and select elements hierarchically.

For example,

// HTML
<div id="list">
  <button class="delete" />
  <div class="items">
    <div class="item">
      <button class="delete" />
      <h1 class="name">Item 1</h1>
    </div>
  </div>
</div>

// CSS
#list > .delete {
  color: black;
}

#list > .items > .item > .delete {
  color: blue;
}

// Javascript
$("#list > .delete").show();
$("#list > .items > .item > .delete").hide();

Pros:

• Naming feels more natural, and names are short and clear

Cons:

• Selecting an element for styling or manipulation is unwieldy
• Changing the HTML structure requires changing a lot of selectors, since names are tied to hierarchical structure

---

Option 3...n: Some hybrid approach? A totally different approach altogether?

Keep in mind the problem of name collision when adding more elements in the future, especially when you have nested elements. Also, the ideal solution would make it easy to change the HTML structure of existing elements without too much disruption everywhere else.

Answer 1

I would recommend being as conservative as possible when adding classes and IDs to your HTML. In most circumstances, using IDs for the major sections of the content and using tag selectors will work just as well as putting classes on everything. The HTML in your example could more succinctly be rewritten as:

<div id="list">
  <button class="delete" />
  <div class="items">
    <div>
      <button class="delete" />
      <h1>Item 1</h1>
    </div>
  </div>
</div>

And then the jQuery selectors would be:

$("#list > .delete").show();
$(".items .delete").hide();

(You could use HTML5 tags that are more semantic and thus rely even less on classes, but I'll assume that's beyond the scope of the question.)

Answer 2

The cleanest solution would be to decouple everything: HTML - CSS - JS.

To do that, you would use your first approach (the individual naming allows the CSS-classes to be applied to any HTML-element) but additionally you add specially named classes for JS. Like this you don't have to be afraid to break your JS if they remove a CSS class and vice versa.

A good read about how to best implement such a naming convention: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML
<div id="list">
  <button class="list-delete js-list-delete" />
  <div class="list-items">
    <div class="item">
      <button class="item-delete js-item-delete" />
      <h1 class="item-name">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript 
$(".js-list-delete").show();
$(".js-item-delete").hide();

Answer 3

Trying to deal with unique names can work well for small projects, but the larger you get the more likely you will have conflicts.

That is why I like the second approach.

However, to make it easier, you can use SASS, to pre process your css files. You can then do nesting like this:

#list {
    .delete {
    }
    .items {
        .item {
        }
    }
}

And you will get code similar to your second example, without having to write it all out.

As for the jQuery selectors, those would still need to be written out longhand if you wanted to do it that way, but having complex selectors like that is often considered a sign of a bad design.