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

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

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2021 朝着牛逼的道路一路狂奔 All Rights Reserved.

访客数 : | 访问量 :