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;
}

然后在我的设计中需要列的时候使用这个混合：

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

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

这样做的问题是，当编译时，我的最终css文件将有100个这样的声明，复制和粘贴，使文件变得庞大、臃肿和重复。替代方案是使用网格系统，该网格系统具有针对每个列布局选项的预定义类，例如C-50(具有"float: left；width:50%;“定义)、C-33、C-25以适应2列、3列和4列布局，然后将这些类用于我的dom。

我真的不喜欢额外的类的想法，从体验它的结果到臃肿的dom (创建额外的div只是为了附加网格类)。另外，最基本的html/css教程会告诉你dom应该与样式分离--网格类是样式相关的！对我来说，这等同于将"border-radius-10“类附加到上面的.round-div示例中！

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

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

那么，哪种解决方案最适合优化呢？除了更大的文件大小，是否有任何研究表明，浏览器渲染多个类的速度是否比大的css文件快，或者相反？

我很想听听你的意见！

Answer 1

在我看来，在客户端使用JS进行较少的编译会降低性能，并且会给浏览器带来额外的负载。但是如果你可以在服务器上编译它，那么web服务器就可以将其压缩并传输到客户端。

无论如何，就我个人而言，我更喜欢在服务器端编译，因为：

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