CSS 优化 - dom 中的额外类或 css 文件中的预处理器重复样式？

Question

我正在开始一个相当大的元素，我正在考虑使用 LESS 来预处理我的 css。

关于 LESS 的有用之处在于你可以定义一个 mixin 包含例如:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

然后在类声明中使用它作为

.rounded-div {
   .border-radius(10px);
}

将输出的 css 获取为:

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

这在浏览器前缀的情况下非常有用。然而，同样的概念可以用来封装常用的 css，例如:

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

然后在我的设计中需要列时使用这个 mixin:

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(当然，使用预处理器我们可以很容易地将其扩展为更有用，例如，将列数和容器宽度作为变量传递，让 LESS 根据列数和容器宽度!)

这个问题是，在编译时，我的最终 css 文件将有 100 个这样的声明，复制和粘贴，使文件变得庞大、臃肿和重复。替代方法是使用网格系统，该系统为每个列布局选项预定义了类，例如.c-50(带有“ float :左；宽度:50%；”定义)、.c-33、.c-25 以适应 2 列、3 列和 4 列布局，然后使用这些给我的 dom 上课。

我真的不喜欢额外类的想法，从经验来看它会导致臃肿的 dom(创建额外的 div 只是为了将网格类附加到)。此外，最基本的 html/css 教程会告诉您 dom 应该与样式分开 - 网格类与样式相关!对我来说，这与将“border-radius-10”类附加到上面的 .rounded-div 示例相同!

另一方面，重复代码导致的大型css文件也是一个缺点

所以我想我的问题是，您会推荐哪个，您使用哪个？

以及，哪种解决方案最适合优化？除了更大的文件大小之外，是否有任何关于浏览器呈现多个类的速度是否比大型 css 文件更快，或者相反的研究？

我很想听听您的意见!

Answer 1

在我看来，使用 JS 在客户端编译 LESS 会降低性能，并且会给浏览器带来额外的负载。但是如果你可以在服务器上编译它然后网络服务器可以 gzip 并将它传输到客户端。
无论如何，我个人更喜欢在服务器端进行编译，因为:

1. 我不能相信非现代浏览器上的性能 JS LESS 编译器
2. 即使我不能相信客户端编译器的功能，因为每个浏览器都有自己的输出。另一方面，我可以依靠我的服务器端编译工作。