框架中的 CSS
Angular Vue React 三大框架
Angular Vue 内置样式集成
React 一些业界实践
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]{ }
Vue
模拟 Scoped CSS 方案1.随机选择器 css modules 2.随机属性 <div abc>----div[abc]{ }
React (React入门教程)
官方没有集成方案
社区方案:1. css modules (需要自己编译,将 class name 放到结构中) 参见博客
2.(babel) react-css-modules (正常写 class 即可)
3.styled components (将组件和样式封装到一起,变成带有样式的组件)
4.styled jsx (直接在 jsx 中写样式,简单粗暴)