CSS 重构：SASS Mixins 与多类答案

【问题标题】：CSS Refactoring : SASS Mixins vs Multiple classCSS 重构：SASS Mixins 与多类
【发布时间】：2013-07-18 22:47:01
【问题描述】：

我正在使用 HAML / SASS 开发 Rails 项目，并且我目前正在尝试重构我的 CSS 代码。也许这只是口味问题，但我想拥有您对两种不同方法的想法：你通常使用多个 CSS 类，还是更喜欢使用 mixins ？使用一个或另一个是否有任何性能问题？你们中有些人两者都用吗？如果是这样，你如何拆分你的代码？

例如：

多个类

// index.html
<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

// style.css.sass
.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

混合

// index.html
<div id="box1"></div>
<div id="box2"></div>

// style.css.sass
@mixin square
    // ...
@mixin rounded
    // ...
@mixin red
    // ...
@mixin green
    // ...

#box1
    // Some properties
    // ...
    @include rounded
    @include red

#box2
    // Some properties
    // ...
    @include square
    @include green

【问题讨论】：

SO 不是提出主观问题的好地方。通过使用 A 和 B 运行基准测试可以轻松确定性能。请注意，您的第一种方法将元素与其表示（它是一个带圆角的绿色框）联系起来，而不是它的目的（它是最新的 cmets 列表）。

标签： css sass

【解决方案1】：

第二个更快，因为浏览器看到的代码块更少

事实上，ID 选择器比我使用的第二个类选择器更快

编辑：

第一个也很难阅读和维护

【讨论】：

你应该阅读这篇csswizardry.com/2011/09/writing-efficient-css-selectors

【解决方案2】：

正确的做法是extends。

index.html

<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

style.css.sass

.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

#box1
  @extend .rounded
  @extend .red

#box2
  @extend .square
  @extend .red

您可以通过replacing the dot with percent 阻止这些类出现在 CSS 中。

【讨论】：