1、css存在的问题
污染：因为css的选择器不具备隔离性，导致最后生成的样式都会污染全局命名空间。落在大型项目中，问题尤为明显。
解决方向：生成唯一的类名; shadow dom; 内联样式; Vue-scoped 方案
其他一些比如无法共享变量（例如主体色等全局样式）、解析方式的不确定性等问题
解决方向：CSS-in-js；避免使用全局样式，组件样式隔离；样式加载和组件生命周期绑定
2、组件的样式
组件应该要暴露样式定制的接口，至少应该具备className与style的接口。
尽量不使用内联样式，因为会导致组件重新渲染，而且使得代码累赘，不方便管理。
3、全局通用样式
应该配置全局通用的一些样式，比如颜色系统，排版系统，尺寸系统，配置开关（比如圆角&阴影），状态系统等等，类似一个UI组件库，都会具备自己的风格与样式规范，这些都属于全局通用的样式。
可以使用babel-plugin-styled-components或babel macro来支持服务端渲染、 样式压缩和提升 debug 体验. 推荐使用 macro 形式, 无需安装和配置 babel 插件。
tips：
svg图标可以使用svgr转换为组件，便于管理，之前用过，且记过一篇随笔，不赘述。
使用rem与em等相对长度单位。
（em：当em为字体单位时继承父元素字体大小，当它为其他属性单位时，继承自身字体大小）
（rem：rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其初始字体大小；应对方法：多写一个绝对单位的声明就可覆盖，比如：p {font-size:14px; font-size:.875rem;}）
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位。所以我们在写CSS的时候，需要注意：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
使用stylint进行样式规范检查。