组件样式方案

学习

Traditional CSS , PreCSS, PostCSS

这些方案的一致表现形式是， 单独维护编写的样式文件， 最终生成一个纯粹的css文件， 通过link标签插入到html中。

CSS in JS

css modules 和 styled components 本质上都是 css in js 的一种实现方案， 主要解决命名空间的问题， 附加变量、继承等 css 本身不具备的功能， 此外能更好的实现组件的封装性。

Css Modules

特点：css modules 的方案是，依然用传统写css的思路和方法写css。本质还是css, 与js依然是分离态的， 需要通过classname建立样式字符串与element 之间的关系。 通过compose实现样式的复用；

优点：使用场景不限于组件类型， 适用于UI Component（单纯的ui展现组件）、Container Component(容器组件通常被用来组装多个UI组件 及实现业务逻辑)；

缺点：功能有限。 比如不支持一些PreCssr提供的嵌套， 函数等复杂功能； 变量还需要通过postcss-modules-values辅助实现。

styled components

styled Components 刚是更直接的编写js的方式写css。 符合javascript 程序员的一贯的编程思路。

优点：

• 功能更强大， 可以使用js中定义的变量， 还支持嵌套、循环、函数等。
• 通过组件继承实现样式复用的功能很强大， 同时还支持样式覆盖
• 由于它本质是组件，还可以进行修改组件的属性等其它复杂的组件操作
• 兼容现有的 className 方式

缺点：

• css可复用性差
• 模板和样式完全耦合.
• 更适合单纯的UI组件

综合来说， Styled Components 是比 Css Modules更强大的 Css in Js 方案。

当然， 选型时也要反过来想， 这些强大的功能是我们一定会用到的吗？

场景举例

ElementUI

ElementUI 使用BEM的方式解决命名空间的问题， 并没有使用Css in js ；

分离样式文件和组件， 使用者在调用组件时需要在页面中显示引用样式文件；

进展：

如果要用css in js 的写法， styled Components 肯定比 css modules 更方便易用；

用css in js 写完的样式是否可以通过webpack loader 从js 中抽出？

延升阅读

• css进化论

• 不要再在Javascript中写css了