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 structur

Answer 1

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.

Answer 2

It really depends on the structure and size of your page.

Some situations will perform better using Option 1, some will be better with Option 2.

I usually go with "Whatever Is Best For This Specific Scenario"

Answer 3

Option 1: Name every single element uniquely.

This is next to impossible and definitely not a best practice. I think it's better if you can use classes that makes sense by grouping relevant styles and properties.

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

I prefer this one. At least you know the flow and where things are.

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

There's always a hybrid approach and totally different approach. I think every developer has their own style of coding. If it's sematically correct and well structured, that would be the best approach.

Answer 4

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 5

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 6

That's a very good question. I think your first option (name every single element uniquely) is the right one, because:

• The element classes (not names) are not that long,
• Emphasis is made on the group as a whole anyway, so the HTML structure of the group should not change very often, and
• Defects in the UI structure can be spotted more easily that way.

That said, I would use a slightly different markup:

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