w3ctech

怎么写JS组件的CSS

我们都熟悉先设计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微信

扫码关注w3ctech微信公众号

共收到8条回复

  • 代码有点问题,半角和全角的符号。 jquery中className={_cls('mod')}会当做字符串来处理, jQuery中这么写 var tabtit = $('<li class='+_cls('thistab')+'></li>');

    回复此楼
  • @大反派 fixed.

    回复此楼
  • 同意,和之前看的 BEM 命名方式一样,适合组件命名。

    回复此楼
  • 首先谢谢分享! 之前也一直在思考组件化的东西,感觉BEM命名法确实再适合不过了(虽然很多人黑BEM)。结合SASS的这种写法确实也挺完美。 现在一直在思考的问题是: 在@mixin component里应该抽象些什么出来?才能在后面差异化继承改组件的时候不用去重写覆盖太多的样式? 还是说继承组件的差异只有类似颜色字号之类的简单样式?差异太大是不是不该归为一类组件?但这样下去似乎会产生很多相似的组件? 望解答,谢谢!

    回复此楼
  • @裕波 报告个bug,刚刚点击评论的时候没提示,然后多点了几下就出现了这么多重复的评论,麻烦删掉下,谢谢

    回复此楼
  • @a1389228 好的,这个我找时间修复一下。

    回复此楼
  • Tips:用 shadomDom 就原生解决命名冲突问题了~

    回复此楼
  • 个人专为IT技术人员搭建的问答平台——欢迎前来拍砖。 http://www.dreawer.com/home.html

    目前最火的领域是前端领域,欢迎一起交流!

    回复此楼