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添加了特别命名的类。像这样你不必害怕破坏你的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();

Answer 3

尝试处理唯一名称可以很好地适用于小型项目，但是越大，您就越有可能发生冲突。

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

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

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

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

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

Answer 4

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

有些情况使用选项1会有所改善，有些情况会更好用选项2。

我通常选择“对于这个特定场景最好的”

Answer 5

选项1：为每个元素命名唯一地

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

选项2：为每个元素命名语义和选择元素分层。

我更喜欢这个。至少你知道流程和事物的位置。

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

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

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

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

6 个答案: