这几个CSS概念，你了解吗？( 三 )

轮落地应用，当前twitter就是基于tailwind进行改版的，我们可以在控制台清晰看到

本文插图
话说这个实验室还蛮有钱，赞助了vite的广告位

本文插图
拓展阅读：

如何评价CSS框架TailwindCSS?[9]

3.2 bulma

本文插图
Bulma 是一个基于 Flexbox 布局技术的免费、开源的现代 CSS 框架，早期接触的时候是在社区看到基于Bulma的Vue.js的轻量级UI组件buefy 。它完全基于CSS ，不需要javascript 。这也是他跟boostrap的最大区别。不过现在也不是很主流，这里不做过多阐述，感兴趣同学可以深入了解，可以看下面这个例子

本文插图
学习使用CSS框架并不是最终目的，它只是一个提升生产力的工具，工具的目的是用来提升我们开发效率，最终赋能到我们的产品中去，所以不用太纠结有没有使用过这些框架，毕竟那么多个框架你是不可能每个都会用。换句话讲了解原理也是可以的, 能提升自己的认知
css沙盒简而言之就是起到样式隔离的作用，互不干扰，前端接触比较多的就是微前端了，毕竟要保证每个集成进来的应用样式互不干扰。因为应用可能是不同团队成员开发，正常是会有类名冲突的情况出现。
最早期的实现方式应该就是iframe了， iframe自带天然隔离，但是这种方式局限性也很多，还有就像上文我们提及的几个点，比如

scoped CSS：通过定义属性scoped来就能结合 DOM 树限制 CSS 作用范围
CSS in js 及 CSS Module 是通过工具把样式编译成脚本
移除head内标签：这也是qiankun(微前端框架) 的 css 沙箱的原理，通过记录子项目运行时新增的 style/link 标签，卸载子项目时移除这些标签。重新添加新载入子项目的标签来实现
shadow DOM：你可以理解为dom中的dom ，是 Web components一个重要属性，它允许将隐藏的 DOM 树附加到常规的 DOM 树中，弊端就是兼容性较差，你可以看下兼容情况??[12]

拓展阅读：

使用 shadow DOM[13]

Reference
[1]使用文档
http://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95
[2]使用文档?
http://cli.vuejs.org/zh/guide/css.html#css-modules