用于jQuery选择器的CSS类命名的最佳实践

Question

在构建Javascript密集的Web应用程序时,命名CSS类以保持Javascript代码和CSS样式表清洁以及UI结构灵活的最佳实践是什么？

---

选项1:唯一地命名每个元素.

例如,

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

优点:

• 选择用于样式或JS操作的项目很容易

缺点:

• 元素名称开始变得非常长并且难以跟踪
• 更改HTML结构需要大量重命名

---

选项2:在语义上为每个元素命名,并分层选择元素.

例如,

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

优点:

• 命名感觉更自然,名字简短明了

缺点:

• 选择用于样式或操作的元素是不实用的
• 更改HTML结构需要更改大量选择器,因为名称与层次结构相关联

---

选项3 ... n:一些混合方法？一个完全不同的方法？

在将来添加更多元素时,请记住名称冲突的问题,尤其是当您有嵌套元素时.此外,理想的解决方案可以轻松地更改现有元素的HTML结构,而不会在其他任何地方中断太多.

Answer 1

我建议在为HTML添加类和ID时尽可能保守.在大多数情况下,对内容的主要部分使用ID并使用标记选择器,就像在所有内容上放置类一样.您的示例中的HTML可以更简洁地重写为:

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

然后jQuery选择器将是:

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

(你可以使用更加语义的HTML5标签,因此更少依赖于类,但我认为这超出了问题的范围.)

Answer 2

最干净的解决方案是解耦所有内容：HTML-CSS-JS。

为此，您将使用第一种方法（单独的命名允许将CSS类应用于任何HTML元素），但另外还要为JS添加专门命名的类。这样，如果他们删除了CSS类，就不必担心破坏JS，反之亦然。

很好地阅读了有关如何最好地实现这种命名约定的信息：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

尝试处理唯一的名称对于小型项目来说效果很好，但项目越大，发生冲突的可能性就越大。

这就是为什么我喜欢第二种方法。

但是，为了使其更容易，您可以使用SASS来预处理您的 css 文件。然后你可以像这样进行嵌套：

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

您将获得与第二个示例类似的代码，而无需将其全部写出来。

至于 jQuery 选择器，如果您想这样做，仍然需要手动编写这些选择器，但拥有这样的复杂选择器通常被认为是糟糕设计的标志。