LESS.JS CSS中的冗余,使用Mixins而不是选择器继承？

Question

我使用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
}

对于像我这样使用大量渐变,roundCorners等的人来说,这很快就会增加.

问题(已编辑)

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

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

尽管如此,我还是会感激任何建议,什么时候打扰,何时不要 - 以及任何其他主题提示如何继续,只要选择器继承不是一个选项.

Answer 1

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

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

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

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

对我来说，更易于维护的 CSS 和标记的好处超过了稍大的样式表的任何缺点。我想你会发现，如果你保持选择器的高效（不要在 Less/Sass 中嵌套超过你需要的数量）并在生产中进行组合和最小化，那么对性能的影响将比你想象的要小。