CODEWITHSUNDEEP
jquerycssclassjquery-selectorsnaming-conventions
Chetan
Chetan

Reputation: 48001

Best practice for CSS class naming for use with jQuery selectors

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:

Cons:

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:

Cons:

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.

Upvotes: 21

Views: 4567

Answers (6)

emik
emik

Reputation: 953

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();

Upvotes: 6

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

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>

Upvotes: 0

Jaspero
Jaspero

Reputation: 2972

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.

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

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"

Upvotes: 1

Alan Geleynse
Alan Geleynse

Reputation: 25139

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.

Upvotes: 3

Tim Hettler
Tim Hettler

Reputation: 1256

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.)

Upvotes: 6

Related Questions