CSS中的LESS.JS冗余，使用Mixins代替选择器继承

我使用less.js与一些常规使用的mixins。例如，我有一个基本类'gradientBlack'，像这样。

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

然后我在几个定义中重用这个类，比如

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}

这种方法的一个缺点是，它用冗余的定义使CSS膨胀。例如，计算后的CSS可能看起来类似于以下内容:

h3 {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions
}
.darkBox {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions
}

对于像我这样使用很多渐变，圆角等的人来说，这很快就会增加。

问题(编辑)

我发现这个主题的已知名称是选择器继承(见Sass)，因为它似乎没有实现现在。本文讨论了它的用途和优点。该语法的计算css可能如下所示:

h3,
.darkBox,
.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    ...
}

尽管如此，我将感谢任何建议，什么时候麻烦，什么时候不麻烦-以及任何其他主题提示如何进行，只要选择器继承不是一个选项。

我认为有几个问题需要考虑:

样式表大小
样式表执行的效率(浏览器执行的速度)
样式表可维护性
标记(html)的可维护性

Mark Gemmill提倡的方法(在/3中)实际上是Nicole Sullivan的面向对象CSS。在切换到Sass之前，我使用了这种模式，并且仍然发现其中一些有用，但我认为Sass/Less方式会产生更易于维护的CSS和更易于维护的标记——不需要在整个标记中散布表示类。

我认为@extend(选择器继承)是Sass相对于Less的主要优势之一，它确实减少了编译样式表中的冗余。

对我来说，更易于维护的CSS和标记的好处超过了稍微大一点的样式表的任何缺点。我想你会发现，如果你保持选择器的效率(不要在Less/Sass中嵌套过多)，并在生产中组合和最小化，性能损失将比你想象的要小。

你可以定义你的mixin，然后在调用它时传递你想要覆盖的变量。

这是一个来自less网站的例子:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}

所以当你调用它的时候你可以这样写

div.header {
  .box-shadow(5px,5px,2px,.5);
}

这样你就可以有一个mixin，但是每次调用它时，你可以给它传递不同的属性。

我最近也开始使用更少的css，这个确切的问题也出现在脑海中。我的回答是:

1/实际生成的css有点无关紧要，因为你永远不可能看到它(除了可能调试你的少代码)，所以如果输出中有一些冗余，这是你与我认为更容易理解和维护的语法之间的权衡。

2/缺点是，正如你所描述的，如果你把那些较少的css类样式作为mixin传递，你就会膨胀你的css输出的大小。如果您在前端使用较少的css，并且它在浏览器中生成css，则不用担心。但是，如果您正在预生成css，那么问题就变成了这种膨胀如何影响下载时间。除非你的css文件因此变得很大，或者你的网站的访问量非常大，否则我不会担心这个问题。

3/在less css中传递类样式作为mixin(或使用选择器继承)的另一种选择是在html中使用class inheritance，而不是在less文件中:

.gradientBlack {
    ...
}
h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}
td.dark {
    .gradientBlack;
    ...
}

你只需在样式表中定义.gradientBlack，然后在html:

中直接引用该类

<h3 class="gradientBlack"></h3>
<div class="darkBox gradientBlack></div>
<td class="dark gradientBlack"></td>

我认为最后，除了下载时间的问题外，最重要的是在给定情况下如何使代码更容易理解和维护。我宁愿在生成的css中多出100行，如果这样更容易理解的话。

这样怎么样?

h3, .darkBox, td.dark {
    .gradientBlack;
}
h3, {
    /*other styles here*/
}
.darkBox {
    /*other styles here*/
}
td.dark {
    /*other styles here*/
}

或者你可以考虑使用CSS缩小器，看看它是否给你一个可接受的大小，而不影响LESS文件的清洁度。

我使用的是lesssphp(在这个例子中可能与less.js不同)，但我注意到，如果我声明mixin，好像它有一个空的参数列表，它将永远不会生成一个样式块。

所以改成

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

.gradientBlack() {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

，并像这样使用:

h3 {
    .gradientBlack();
    ...
}
.darkBox {
    .gradientBlack();
    ...
}

，它不会生成未使用的块

问题(编辑)

相关内容

最新更新

热门标签：