用于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结构需要大量的重命名

---

方案二：名称的每一个元素语义，并选择要素分层。

例如，

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

优点：

• 命名感觉更自然，而且名称是简短明了

缺点：

• 选择元素为styl ING或操纵笨重
• 更改HTML结构需要改变很多选择的，因为名字是绑层次结构

---

选项3，...，N：一些混合的方法？完全不同的方法？

请注意将来添加更多元素时名称冲突的问题，特别是当您有嵌套元素时。另外，理想的解决方案可以很容易地改变现有元素的HTML结构，而不会在其他地方造成过多的中断。

Answer 1

试图处理独特的名称可以很好地适用于小型项目，但是越大越有可能发生冲突。

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

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

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

而且你会得到类似于你的第二个例子的代码，而不必写出全部。

至于jQuery选择器，如果你想这样做，仍然需要写出这些选择器，但如此复杂的选择器往往被认为是一个糟糕的设计的标志。

Answer 2

我建议在向您的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 3

这实际上取决于你的页面的结构和大小。

某些情况下，会更好地发挥使用选项1，有的会更好地与方案2

我通常以“无论是最适合这种特定情况下”

Answer 4

方案1走：命名每一个元素 唯一。

这几乎是不可能的，绝对不是最佳实践。我认为如果可以通过对相关样式和属性进行分组来使用有意义的类，那会更好。

选项2：以语义方式命名每个元素 ，并分层次选择元素 。

我更喜欢这一个。至少你知道流量和事情。

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

总有一种混合方法和完全不同的方法。我认为每个开发人员都有自己的编码风格。如果它的字面正确和结构良好，那将是最好的方法。

Answer 5

这是一个非常好的问题。我想你的第一个选项（名称每一个元素唯一）是正确的，这是因为：

• 元素类（没有名字）不那么长，
• 强调的是小组提出的总之，所以该组的HTML结构不应该经常变化，并且这种方式可以更容易地发现UI结构中的缺陷。

这就是说，我会用一个稍微不同的标记：

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

Answer 6

最干净的解决办法是脱钩的一切：HTML - CSS - JS。为此，您可以使用第一种方法（单个命名允许将CSS类应用于任何HTML元素），但另外还要为JS添加专门命名的类。就像这样，你不必害怕打破你的JS，如果他们删除一个CSS类，反之亦然。

一个好的阅读有关如何最好地实现这样的命名约定： 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();