-
在 vue2.* 框架中被重构的组件可能通过
$ref
,$children
,$slots
,$scopedSlots
等方式被访问,随意删减、重命名组件属性都可能导致引用处的代码出错。使用 TS 可以解决这一问题 -
由于 css 选择器特性和样式继承特性,外部组件能够修改被重构组件的内部样式,这将导致不可预期的显示错误。
- 原则上当前组件的样式只影响当前组件,禁止对子组件样式进行修改
- 为每个 dom 绑定特定 class,直接使用该 class 名定义样式,降低样式层叠复杂度
- 禁止使用后代选择器,改为子代选择器>
,确保只影响需要被影响的组件样式
- 使用 emotion 能够避免 class 命名的困难,并实现样式的复用和动态样式的生成
- 默认被继承的属性应该提供全局初始值以供组件根 dom 进行样式初始化,.class{ all:initial }
虽然也能够初始化样式,但是恢复的是浏览器默认样式可能和需求不符。 -
容易造成额外影响的选择器
-
具有继承属性的样式