三大框架中的CSS

1. Angular

（1）Angular.js (1.x) - 没有样式集成能力
（2）Angular（2+）

• 提供了样式封装能力
• 与组件深度集成

（3）ShadowDOM

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

（4）Scoped CSS

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

（5）模拟Scoped CSS

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

  <div abcdefg></div>
  div[abcdefg]{ }
  

2. Vue

（1）模拟Scoped CSS

• 方案一：随机选择器

  css modules
  

• 方案二：随机属性

  <div abcdefg></div>
  div[abcdefg]{ }
  

3. React

（1）官方没有集成方案
（2）社区方案众多

• css modules
• (babel)react-css-modules
• styled components
• styled jsx

• 点赞
• 收藏
• 分享
• • 文章举报

前端小兔子 发布了26 篇原创文章 · 获赞 0 · 访问量 565 私信 关注