CSS讲解(10) 三大框架中的CSS

• Angular Vue React 三大框架
• Angular Vue 内置样式集成
• React 一些业界实践

Angular

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

几个概念知识：

• ShadowDOM

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

• Scoped CSS

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

• 模拟Scoped CSS

  • 方案一: 随机选择器(不支持)
  • 方案二: 随机属性
    • <div abcdefg>
    • div[abcdefg] {}
  • Angular 选用了方案二

Vue

• 模拟Scoped CSS
  • 方案一: 随机选择器
  • 方案二: 随机属性
    • <div abcdefg>
    • div[abcdefg] {}
  • Vue 支持两种

React

• 官方没有集成方案
• 社区方案众多
  • css modules
  • (babel)react-css-module
  • styled components
  • styled jsx