- 行内样式:没有复用性
- 组件化样式:通用组件库,风格固定,例如 antd
- Card
- Table
- List
- 传统css
- 原子化css:tailwindcss
- 缺点:面向过程,注重细节,冗长的类名样式
- 适合前台UI
- 定制化
- 个性化
- 交互性
主应用和子应用之间的样式隔离
- BEM,Block Element Modifier,约定样式前缀规范
- cssModule 打包生成不冲突的 class类名
- shadow DOM 真正意义上的样式隔离
- 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