Angular Vue React 框架中的 CSS

框架中的 CSS

Angular Vue React 三大框架

Angular Vue 内置样式集成

React 一些业界实践

Angular

Angular . js (1.x)：没有样式集成能力

Angular （2+）：提供了样式封装能力  2.与组件深度集成

ShadowDOM（谈一谈神奇的ShadowDOM）：1.逻辑上一个DOM  2.结构上存在子集结构

Scoped CSS （Scoped CSS规范）：1.限定了范围的CSS 2.无法影响外部元素 3.外部样式一般不影响内部 4.可以通过 /deep 或 >>> 穿透

达到封装效果：模拟 Scoped CSS  方案1.随机选择器（不支持）2.随机属性  <div abc>----div[abc]{ }

Angular 中加载 css 方法

Vue

模拟 Scoped CSS  方案1.随机选择器 css modules  2.随机属性  <div abc>----div[abc]{ }

参见：详解在Vue中有条件地使用CSS类

在Vue中使用样式

React （React入门教程）

官方没有集成方案

社区方案：1. css modules （需要自己编译，将 class name 放到结构中） 参见博客

2.(babel) react-css-modules (正常写 class 即可）

3.styled components (将组件和样式封装到一起，变成带有样式的组件）

4.styled jsx （直接在 jsx 中写样式，简单粗暴）

参见博客：react 中 css 的使用    定义组件和css样式

react中书写css的三种方式    React.js中的CSS使用