CSS选择器链性能 [英] CSS Selector Chain Performance

问题描述

我会尝试用一点CSS解释我的问题

选项1

在整个地方重复 float：left; ，而是将所有要浮动的类名链接在一起。

 
 .one-little-thing，
 .two-little-things，
。three-little-things，
 .four-little -things，
 .five-little-things {
 float：left; 
} 
 .one-little-thing {
 color：blue; 
} 
 .two-little-things {
 color：red; 
} 
。三种小东西{
 color：yellow; 
} 
 .four-little-things {
 color：blue; 
} 
 .five-little-things {
 color：green; 
} 
 

字符总数：331（包括空格，但即使修剪空格，有效）

选项2

 
 .one-little-thing {
 color：blue; 
 float：left; 
} 
 .two-little-things {
 color：red; 
 float：left; 
} 
。三种小东西{
 color：yellow; 
 float：left; 
} 
 .four-little-things {
 color：blue; 
 float：left; 
} 
 .five-little-things {
 color：green; 
 float：left; 
} 
 

总字数：284

与这两段代码完全相同的事情，第二种方式有更少的字符，这意味着更少的字节。

所以我的问题是：

这是否意味着第二种方式更好的性能？

为什么它与我有关

<$ Sass中的c $ c> @extend 允许例如 @extend .clearfix; ，如果在选项1中使用

解决方案

这是最好的方法吗？ / div>

由于字符的这种最小差异，性能结果在这里显然不会明显。然而，编写CSS的好处是，你在第一个片段中做的是，你可以添加很多其他共享属性只在一个地方，并将它们应用于每个类。

此外，假设您决定翻译您的网站以支援希伯来语或另一种RTL语言。所有你需要做的是改变float：left to float：right在那个点而不是每个单独的类。说到这一点，我认为从可用性和长期可扩展性角度来看待CSS，而不是在特定实例的纯服务器性能来看待CSS很重要。

I will try to explain my question with a little bit of CSS

Option 1

I don't repeat the float:left; all over the place, instead I chain all the class names that are going to float left together.

 .one-little-thing,
 .two-little-things,
 .three-little-things,
 .four-little-things,
 .five-little-things {
    float:left;
}
.one-little-thing {
    color: blue;
}
.two-little-things {
    color: red;
}
.three-little-things {
    color: yellow;
}
.four-little-things {
    color: blue;
}
.five-little-things {
    color: green;
}

Total Number of Characters: 331 (including spaces, but even if you trim the spaces, the example is going to be valid)

Option 2

• Where I repeat float:left; all over the place, but I get slightly less characters.

.one-little-thing {
    color: blue;
    float:left;
}
.two-little-things {
    color: red;
    float:left;
}
.three-little-things {
    color: yellow;
    float:left;
}
.four-little-things {
    color: blue;
    float:left;
}
.five-little-things {
    color: green;
    float:left;
}

Total Number of Characters: 284

I did exactly the same thing with both pieces of code here, the second way has less characters, which means less bytes.

So my question is this:
Does this mean that the second way is better for performance ? What if I had up to ninety-nine-little-things ?

Why it concerns me
The @extend in Sass allows to for example to @extend .clearfix;, which, if used as in "Option 1" would result in a very, very long selector.

So which is the best way ?

解决方案

With such a minimal difference in characters the performance result will obviously not be noticeable here. However, The benefit of writing CSS the way you did in the first snippet is that you could add a lot of other shared properties in only one place and have them applied to each of the classes. As you add more and more shared properties you will see the character difference tip in favor of the first method.

Also, say you decided to translate your site to support hebrew or another RTL language. All you would have to do is change the float: left to float: right in that one spot instead of each individual class. With that said, I think its important to look at CSS from a usability and longterm scalability perspective instead of pure server performance at a particular instance.

这篇关于CSS选择器链性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！