Best practice for CSS class naming for use with jQ

问题:

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.

回答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.

回答2:

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

回答3:

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

回答4:

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"

回答5:

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.

回答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>