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

Question

我很好奇哪种 CSS 样式化方法更快(渲染明智)，然后从最佳实践的 Angular 来看哪种方法更有意义(我会说相当主观？)。

我可以创建如下基类:

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

或

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

#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 文档，然后您可以部署它。