[关闭]
@a06062125 2017-09-07T13:20:31.000000Z 字数 971 阅读 282

组件样式方案

学习


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 程序员的一贯的编程思路。

优点

缺点

综合来说, 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 中抽出?

延升阅读

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注