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

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

这个问题是,在编译时,我的最终css文件将有100个这样的声明,复制和粘贴,使文件变得庞大,臃肿和重复.另一种方法是使用一个网格系统,它为每个列布局选项预定义了类,例如.c-50(带有"float:left; width: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 会降低性能，并且会给浏览器带来额外的负载。但是如果你可以在服务器上编译它，那么Web服务器可以gzip并将其传输到客户端。
无论如何，我个人更喜欢在服务器端编译，因为：

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