CSS类命名的最佳实践与jQuery选择器一起使用 [英] Best practice for CSS class naming for use with jQuery selectors

问题描述

在构建一个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>项目1< / h1> 
< / div> 
< / div> 
< / div> 
 
 // CSS 
 .list-delete {
 color：black; 
} 
 
 .item-delete {
 color：blue; 
} 
 
 // Javascript 
 $（。list-delete）。show（）; 
 $（。item-delete）。hide（）; 
  

优点：

• 选择项目进行样式或JS操作很容易

缺点：

• 元素名称开始变得很长，难以跟踪


• 更改HTML结构需要大量重命名

---

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

b
$ b

例如，

  // HTML 
< div id = list> 
< button class =delete/> 
< div class =items> 
< div class =item> 
< button class =delete/> 
< h1 class =name>项目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（）; 
  

优点：

• 命名感觉更自然，名称短而清晰。

缺点：

$ b b

• 选择用于样式或操作的元素难以处理


• 更改HTML结构需要更改很多选择器，因为名称绑定到层次结构

---

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

记住在将来添加更多元素时的名称冲突问题，特别是当你有嵌套的元素。此外，理想的解决方案可以轻松更改现有元素的HTML结构，而不会在其他任何地方造成太大的破坏。

解决方案

处理唯一名称对于小项目可以很好地工作，但是越大，你就越有可能发生冲突。

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

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

  #list {
 .delete {
} 
。项目{
 .item {
} 
} 
} 
  

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

对于jQuery选择器，那些仍然需要如果你想这样做，但是有复杂的选择器，通常被认为是一个坏的设计的迹象。

While building a Javascript-heavy web application, what is the best practice for naming CSS classes to keep the Javascript code and CSS stylesheets clean and the UI structure flexible?

---

Option 1: Name every single element uniquely.

For example,

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

Pros:

• Selecting an item for styling or JS manipulation is easy

Cons:

• Element names start becoming really long and hard to keep track of
• Changing the HTML structure requires lots of renaming

---

Option 2: Name every element semantically, and select elements hierarchically.

For example,

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

Pros:

• Naming feels more natural, and names are short and clear

Cons:

• Selecting an element for styling or manipulation is unwieldy
• Changing the HTML structure requires changing a lot of selectors, since names are tied to hierarchical structure

---

Option 3...n: Some hybrid approach? A totally different approach altogether?

Keep in mind the problem of name collision when adding more elements in the future, especially when you have nested elements. Also, the ideal solution would make it easy to change the HTML structure of existing elements without too much disruption everywhere else.

解决方案

Trying to deal with unique names can work well for small projects, but the larger you get the more likely you will have conflicts.

That is why I like the second approach.

However, to make it easier, you can use SASS, to pre process your css files. You can then do nesting like this:

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

And you will get code similar to your second example, without having to write it all out.

As for the jQuery selectors, those would still need to be written out longhand if you wanted to do it that way, but having complex selectors like that is often considered a sign of a bad design.

这篇关于CSS类命名的最佳实践与jQuery选择器一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！