CSS 性能

Question

通常当我建立一个站点时，我将所有的 CSS 放在一个文件中，并且一次性定义与一组元素相关的所有属性。像这样:

#myElement {
    color: #fff;
    background-color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 14pt;
}

.myClass {
    font-size: 12pt;
    padding: 5px;
    color: #ee3;
}

我一直在考虑将我的定义拆分成许多不同的文件(colours.css、layout.css、fonts.css ...)，正如我所推荐的那样。像这样:

/* colours.css */
#myElement {
    color: #fff;
    background-color: #000;
    border-color: #ccc;
}
.myClass {
    color: #ee3;
}

/* layout.css */
#myElement {
    padding: 10px;
    border: 1px solid;
}
.myClass {
    padding: 5px;
}

/* fonts.css */
#myElement {
    font-size: 14pt;
}
.myClass {
    font-size: 12pt;
}

为了减少 HTTP 请求，我会在推出之前合并文件并去除空格，所以这不是问题，但我的问题是:一遍又一遍地重复所有这些选择器是否会导致浏览器出现任何性能问题？

或者，是否有任何工具可以通过合并来自不同文件的定义来避免这个(潜在的)问题？即:采用我的第二个示例中给出的输入(3 个不同的文件)，并将它们合并到一个文件中，就像第一个示例一样。

Answer 1

浏览器必须找到所有定义，然后将它们相加并根据最新定义覆盖不同的属性。所以会有轻微的开销。

话虽这么说，但即使在 5 年前的硬件上，它也不会很明显。如今，浏览器在这方面非常高效。