我应该目标是添加一个类/ id到一切，或使用其他选择器 [英] Should I aim to add a class/id to everything, or use other selectors

问题描述

我不知道什么是最好的（最有效的）选择一个元素的方式。

假设我有下面的布局/ p>

 < div id =navigation> 
< ul> 
< li>链接1< / li> 
< li>链接2< / li> 
< li>链接3< / li> 
< / ul> 
< / div> 
  

1. 我想选择我的无序列表我应该做 #navigation ul {} 或者给UL分配一个类吗？


2. 选择我的列表项，再次确保我只影响那些。我应该如何做 navigation ul li {} 或分配一个类吗？


3. 最后，如果我想选择我的第一个链接和样式它，我应该 #navigation ul li：first-child {} 还是分配类？

b $ b

我感谢这些问题几乎是一样的，但我很好奇，当你应该使用一个类，而不是。

解决方案

这里没有快速的答案。

经验法则可能是使用类，当你想将某些元素组合在一起，对待他们一样，使用类是唯一的方法。

在你的最后一个例子中，完全不需要一个类。

但是，在示例3中使用一个类会导致更好的性能，因为浏览器会更快地找到相关的项目。

$ b

简而言之，在上面显示的内容中，您写的内容是美好的。

您应该阅读这篇文章，其中涵盖了选择器的效率。

基本上效率顺序如下：

 例如#header 
 Class，例如.promo 
类型，例如div 
相邻的兄弟，例如h2 + p 
儿童，例如。 li> ul 
后代，例如ul a 
通用，即* 
属性，例如[type =text] 
伪类/元素，例如a：hover 
  

类和Id之间的性能差异通常是不相关的。

$ b $

这不是一个参数，添加类和id无处不在 - 它只是允许您判断性能和可维护性之间的权衡。

I'm never sure what the best (most efficient) way to select an element is.

Lets say I have the following layout (extremely simple example)

<div id="navigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

1. I want to select my unordered list (ensuring I don't affect any other UL's throughout my site), should I do #navigation ul {} or assign a class to the UL?
2. I want to select my list items, again ensuring I only affect those. Should I do navigation ul li{} or assign a class?
3. And finally, If I want to select my first link and style it, should I do #navigation ul li:first-child {} or assign a class?

I appreciate these questions are pretty much the same, but I'm curious when you should use a class and when not to.

解决方案

There's no hard and fast answer here.

A general rule of thumb might be to use classes when you want to group certain elements together, treat them the same and using a class is the only means of doing it.

In your last example for instance, there is strictly no need for a class.

But, using a class in example 3 will result in better performance, as the browser will located the relevant items quicker. Traded off against this is a slight reduction in code-legibility.. If you have class names on everything then it becomes harder to read the rest of the markup.

In short, in what you have shown above, what you have written is fine imo.

You should read this article though which covers selector efficiency.

Basically the order of efficiency is as follows:

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover

The performance difference between classes and Id's is normally irrelevant.

Going further down the list though, things slow down considerably.

This isn't an argument to add classes and id's everywhere - it just allows you to judge the trade-off between performance and maintainability.

这篇关于我应该目标是添加一个类/ id到一切，或使用其他选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！