我们都熟悉先设计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微信公众号
代码有点问题,半角和全角的符号。 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
目前最火的领域是前端领域,欢迎一起交流!
共收到8条回复