1. 行内样式:没有复用性
    1. image.png
  2. 组件化样式:通用组件库,风格固定,例如 antd
    1. Card
    2. Table
    3. List
  3. 传统css
    1. image.png
  4. 原子化css:tailwindcss
    1. image.png
    2. 缺点:面向过程,注重细节,冗长的类名样式
    3. 适合前台UI
      1. 定制化
      2. 个性化
      3. 交互性

主应用和子应用之间的样式隔离

  1. BEM,Block Element Modifier,约定样式前缀规范
  2. cssModule 打包生成不冲突的 class类名
  3. shadow DOM 真正意义上的样式隔离
  4. css-in-js

子应用之间的样式隔离

Dynamic Stylesheet 动态样式表,当应用切换时,移除老应用的样式,添加新的应用样式。

ifrmae样式隔离

全局的 css 是不会污染到 iframe 内的
iframe相当于一个沙箱,在iframe中的html设置 css,只能影响这个 html,而不能影响iframe,
这时候的 iframe对于它内部的 html来说,相当于浏览器的外壳,是没法改变的。如果要改变iframe样式,只能在包含iframe的html中设置css

iframe 的其他域名下的页面,HTML5 出于安全性考虑是禁止操作的,也就是改不了
不同源的 iframe,不可以进行 js 交互的

如果 iframe是同域的内容,可以修改 css,跨域的话,就无法修改了
css 样式隔离 https://juejin.cn/post/7064246166396862477