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

我正在开始一个相当大的项目,我正在考虑使用LESS来预处理我的CSS.

关于LESS的有用的东西是你可以定义一个包含例如：

.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个这样的声明,copy&粘贴,使文件巨大和blo肿和重复.替代方案是使用具有每个列布局选项的预定义类的网格系统,例如. .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文件更快地呈现多个类,或者另一方面呢？

我很乐意听到你的意见！

解决方法

从我的角度来看,使用JS在客户端编译LESS可以降低性能,并且会在浏览器上产生额外的负担.但是如果您可以在服务器上编译,那么Web服务器可以gzip并将其传输到客户端.
无论如何,我个人更喜欢在服务器端编译,因为：

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

原文地址：https://www.jb51.cc/css/214332.html