适用于jQuery选择器的CSS类命名的最佳做法

在构建一个重量很大的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结构，而不会在其他地方发生太多的中断。

解决方法

尝试处理独特的名称可以对小项目有效，但是越大越有可能会产生冲突。

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

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

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

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

对于jQuery选择器，如果您想要这样做，那么仍然需要长时间写出，但是像这样的复杂选择器通常被认为是坏的设计的标志。

原文链接：https://www.f2er.com/jquery/182379.html

适用于jQuery选择器的CSS类命名的最佳做法

解决方法

猜你在找的jQuery相关文章