我们都熟悉先设计HTML再写CSS。比如经典的HTML模式：

<div class="mod">
  <div class="bd">
  </div>
</div>

再写Sass (现在基本很少写native CSS了吧)：

.mod {
  .bd {
    // blablabla...
  }
}

当做一个通用的JS组件时，这么写就很容易冲突（侵害别人的样式或被别人的样式侵害）。不想冲突可以写长点，比如用JS输出的HTML变成:

<div class="component-name-mod">
  <div class="component-name-mod-bd">
  </div>
</div>

名字看起来挺长。实际上这么写反而省事了，JS里这么（React为例）：

<div className={_cls('mod')}>
  <div className={_cls('mod-bd')}>
  </div>
</div>
...
_cls(name) {
  return 'component-name' + (name ? '-' + name : '');
}

Sass这么写:

.component-name {
  &-mod {
    &-mod-bd {
    }
  }
}

假如component的样式可以被抽像，用mixin而不是用extend:

@mixin component {
  &-mod {
    &-mod-bd {
    }
  }
}

.component-name {
  @include component;
}

扫码关注w3ctech微信公众号