框架中的css

• angular vue react 三大框架
• angular vue 内置样式集成
• react 一些业界实践

angular

• angular.js(1.x): 没有样式集成能力
• angular(2.x): 提供了样式封装能力、与组件深度集成

ShadowDOM

• 逻辑上一个DOM
• 结构上存在子集结构

Scoped css

• 限定了范围的css
• 无法影响外部元素
• 外部样式一般不影响内部
• 可以通过/deep/或>>>穿透

模拟scoped css

• 方案一：随机选择器（不支持）
• 方案二：随机属性

<div abcdef> div[abcdef] {}

Vue

模拟Scoped CSS

• 方案一：随机选择器 css modules 在style上加module，然后在对应的dom上使用 this.$style.css名去引用属性
• 方案二：随机属性 在style上加scoped属性

<div abcdef> div[abcdef] {}

React

官方没有集成方案

社区方案众多

• css modules
• （babel）react-css-modules
• styled components
• styled jsx

阅读量：

评 论：