组件的样式管理
1️⃣ 组件的样式应该高度可定制化
2️⃣ 避免使用内联 CSS
3️⃣ 使用 CSS-in-js
0. 基本用法
1. 样式扩展
2. mixin 机制
3....尤其是大型团队合作的项目, 很难确定某个特定的类或者元素是否已经赋过样式. 所以在大部分情况下我们都会绞尽脑汁新创建一个类名, 而不是复用已有的类型....如果团队没有制定合适的 CSS 规范(例如 BEM, 不直接使用标签选择器, 减少选择器嵌套等等), 代码很快就会失控
解决的方向: 之前文章提到组件是一个内聚单元, 样式应该是和组件绑定的....内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;)
内联样式通过...当然通过某些工具可以将静态的 object 提取出去
不方便调试和阅读
…
所以 内联 CSS 适合用于设置动态且比较简单的样式属性
社区上有许多 CSS-in-js 方案是基于内联 CSS 的, 例如