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

Question

我一直很好奇CSS样式的哪种方法更快(渲染明智),然后从简单的最佳实践角度来看哪种方法更有意义(我会说很主观？).

我可以创建基类,如:

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

要么

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

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

Answer 1

我同意 tster 的观点：第一个意味着将可视化命令放入 HTML 中（始终注意名称描述其外观而不是用途的类）。如果它确实有一个逻辑目的（例如.section）那么它可能会更干净。否则我会使用第二个版本。

你真正遇到的问题是 CSS 缺乏抽象，这意味着你往往会遭受重复和/或奇怪的分组以避免重复。您可能想看看这篇关于 Sass 的文章。总体思路是编写一个 Sass 文档（不完全是 CSS，但类似），然后将其编译成 css 文档，然后进行部署。