9

我开始一个相当大的项目，我正在考虑使用 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: left; width:50%;”定义）、.c-33、. c-25 以适应 2 列、3 列和 4 列布局，然后将这些类用于我的 dom。

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

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

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

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

我很想听听你的意见！

4

1 回答 1

1

From my point of view, compiling LESS on client side using JS can reduce your performance and it will have an extra load on browser. But if you can compile it on server then web server can gzip and transfer it to client.
Anyway, personally I prefer compilation on server side because:

  1. I cant trust performance JS LESS compiler on non-modern browsers
  2. Even I cant trust functionality of client side compilers, because each browser can have it's own output. On the other hand, I can rely on my server side compile job.
于 2012-06-08T18:53:07.380 回答