组件化天下的CSS

前端已经是组件化的天下：

而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案。

在组件化中选择合适的CSS解决方案应该符合以下条件：

可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的元素；

可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；

支持所有的css特性：伪类、动画、媒体查询等；

编写起来简洁方便、最好符合一贯的css风格特点；

等等...

React中的CSS

事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点。

在这一点上，Vue做的要好于React：

Vue通过在.vue文件中编写 <style> 标签来编写自己的样式；

通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效；

通过 lang 属性来设置你喜欢的 less、sass等预处理器；

通过内联样式风格的方式来根据最新状态设置和改变css；

等等...

Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

相比而言，React官方并没有给出在React中统一的样式风格：

由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库；

大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案；

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情