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

Posted 2023-03-05

【中文标题】用于 jQuery 选择器的 CSS 类命名的最佳实践

【英文标题】：Best practice for CSS class naming for use with jQuery selectors

【发布时间】：2011-08-06 16:00:23

【问题描述】：

在构建重 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 结构，而不会对其他任何地方造成太多干扰。

【参考方案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 标签，因此对类的依赖更少，但我认为这超出了问题的范围。）

【讨论】：

尽可能使用 ID 实际上更好，因为它使用原生 JavaScript getElementById，这比 jQuery 按类选择要快。

【参考方案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();

【讨论】：

我喜欢（并使用）相同的方法：当我无法使用 ID 时，我使用样式类（在 CSS 中）和“选择”类（按行为分组）。但是我对 jQuery 相当陌生，我想知道：它被认为是最佳实践吗？有哪些优点和缺点？

主要优点是可维护性。使用这种方法可以避免 js 和 css 的相互依赖：在 js 代码中没有出现用于样式的类，因此您可以根据需要添加或删除它们，无论您是在使用 js 还是使用 css 进行样式设置，都没有任何安全性会破裂。此外，我会建议特定的状态类，例如：'state-selected'、'state-valid'、'state-error'等......这些是用于样式目的但通过 js 添加的类，所以它们是一种特殊情况，因为您无法避免它们同时出现在 css 和 js 代码中。

【参考方案3】：

尝试处理唯一名称对于小型项目很有效，但越大越容易发生冲突。

这就是我喜欢第二种方法的原因。

不过，为了方便起见，您可以使用SASS 来预处理您的 css 文件。然后你可以像这样嵌套：

#list 
    .delete 
    
    .items 
        .item 
        
    

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

至于 jQuery 选择器，如果你想这样做的话，仍然需要用手写的方式写出来，但是像这样复杂的选择器通常被认为是糟糕设计的标志。

【讨论】：

我试过这个，然后我得到了很多长长的 jQuery 选择器，当我想稍微改变 HTML 的结构时，我不得不改变很多行 jQuery 代码。难道没有更好的办法吗？

更好的方法是不要过多依赖 jQuery 选择器。使用像这样的大型选择器会导致您描述的问题。相反，模块化你的代码并使用 jQuery.find() 从组件中获取元素，而不是总是使用全局选择器。

【参考方案4】：

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

有些情况下使用选项 1 会更好，有些情况下使用选项 2 会更好。

我通常选择“最适合这个特定场景的东西”

【参考方案5】：

选项 1：命名每个元素 独一无二。

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

选项 2：命名每个元素 语义上，并选择元素 分层。

我更喜欢这个。至少你知道流程和事情在哪里。

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

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

【参考方案6】：

这是一个很好的问题。我认为您的第一个选项（唯一地命名每个元素）是正确的，因为：

元素类（不是名称）没有那么长， 无论如何强调整个组，所以组的 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>

【讨论】：

但是它们可以变得很长，对吧？每一层嵌套都会为类名增加一层。另外，在您的标记中，您将如何专门选择list-item 的删除按钮？

@Chetan，不一定非得如此，您始终可以在图层之间交错一个容器元素并将其用作参考点。我会将第一个列表项的删除按钮与$("#list .list-item:first button.delete") 匹配。