Question

我一直很好奇CSS样式的哪种方法更快（渲染明智），然后从简单的最佳实践角度来看哪种方法更有意义（我觉得很主观？）。

我可以创建基类，如：

.rounded-corners-5 { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
 }

OR

我可以使用另一种方法将样式应用于多个ID / Classes：

#box1, #header, #container, .titles { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
}

Answer 1

我同意tster：第一个意味着在HTML中添加一个可视化命令（始终要注意具有描述其外观而不是其目的的名称的类）。如果它确实具有逻辑目的（例如.section），那么它可能更清晰。否则我会使用第二个版本。

你真正遭受的是CSS缺乏抽象，这意味着你往往会遇到重复和/或奇怪的分组，以避免重复。您可能希望查看this article about Sass。一般的想法是你编写一个Sass文档（它不是CSS，但类似），然后编译成一个css文档然后部署。

Answer 2

我会一直使用第二种方法，这对我来说似乎更合乎逻辑。我实际上并不知道它是否更快地渲染，但它在文件中更整洁，并且它将所有类似的属性ID /类保存在一起。

Answer 3

我不知道哪一个会被渲染得更快。但是从维护的角度来看，我会讨厌使用第二个选项，因为这意味着#header元素可能在CSS中的许多不同位置定义了规则。我不希望每次想要改变时都要追捕它。

Answer 4

我不认为语法对速度很重要。

当浏览器必须重新绘制时，性能更多。在:hover等事件或对DOM进行更改时会发生这种情况。位于absolute或fixed的元素的重绘最快，因为重绘的次数较少 - 因为它们不是内联的，因此您不必重新绘制环绕元素。

您可以使用Firebug的Google Page Speed插件来查看重绘。

我相信更多的浏览器会在这样的事情上使用硬件加速，这会加快速度。

关于语法，我会使用描述元素内容或用法的类和id（就像你的第二个例子）。现在，当您确定类.rounded-corners-5的所有元素都应具有border-radius: 10px时，您不必更改HTML。保持风格和结构。

Answer 5

就样式而言，将你的html写成仅用于函数，并编写CSS来添加表单。所以对于Ids，他们应该识别元素。走向另一个方向，基本上将风格写入html，例如.blue{color:blue}这会使你的HTML与类混乱。 CSS的目标是允许您交换CSS工作表并完全控制外观。

Answer 6

如果你没有在一个元素上使用多个id和类，第一种方法可以更快地工作，因为这样你就可以更容易地记住在编辑HTML或服务器脚本时类/ id正在做什么。我不知道哪一个渲染得更快，这对许多事情甚至可能是主观的，例如浏览器，计算机时代等等，因为我对渲染算法的内部结构一无所知。各种渲染引擎（不是我能知道其中有两个我们都知道并讨厌而不改变工作......）。

Answer 7

效率越高，占用空间越少，网页加载速度越快，呈现速度越快。

这也有助于搜索引擎优化（SEO）。

什么是更快/更高效的CSS样式

7 个答案: