共计 3033 个字符，预计需要花费 8 分钟才能阅读完成。
前沿: 聊起 css，印象最粗浅的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名
cut picture boy（切图仔），在页面布局及还原设计图中宽泛应用 css 来开发页面，我记得刚开始接触最多的就是 Bootstrap（用于开发响应式布局、挪动设施优先的 WEB）。然而随着前端突飞猛进的编进，诸如 element，ant design 等优良的 ui 库呈现，在比照中感到审美疲劳。言归正传，css 近年来了也催生了蛮多新的解决方案，比方CSS Modules、styled-components（css in js）、Functional CSS、CSS 原子类、CSS 沙盒等等
1. CSS Module
CSS Module 顾名思义就是 CSS 模块化，为什么须要模块化？咱们晓得随着基于 vue、react 开发 SPA 的 web 利用，实质上是由多组件搭建而成，就好比用积木来搭房子，如果这个时候两个组件的款式类名反复了，那岂不是就抵触了？为了解决抵触就须要进行模块化辨别，没有了命名抵触，更好的让组件间沙箱化，而 CSS Module 就是 css 模块化的实现形式之一
CSS Module 在打包的时候会将类名转换成带有 hash 值的新类名，依据命名规矩，从而杜绝 css 类名抵触的问题。
👨🎓 啊呆同学：CSS Module 是不是就是 Vue: scoped 款式的实现形式呢？
答：不是的，CSS Scope 是通过限度作用域来实现，款式在部分失效，而不是真正意义上的 css Module
咱们晓得，当一个 style 标签领有 scoped 属性时候，它的 css 款式只能用于以后的 Vue 组件，它的实现原理是通过 PostCSS 来实现，通过给想对应的 dom 新增一个属性，同时给 css 选择器新增一个对应的属性，来对应这个惟一的 dom，如下所示
而 css module 是怎么样实现的呢，以 vue 为例子，如何应用CSS module
- webpack 间接 引入
vue-loader应用文档🔗 - vue-cli3 内置，能够间接开箱即用，只须要在 style 标签标记
module，就能够在组件内应用 CSS Modules 了，更多操作看文档应用文档🔗
上面咱们看看 CSS Module 在 vue 我的项目中的编译成果
咱们能够看到，CSS Modules 在最终构建页面时会主动重命名 class，用 vue 官网形容就是，这个 module 个性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 部分对象。而后你就能够在模板中通过一个动静类绑定来应用它了
👨🎓 啊乐同学：你说 CSS Module 是 css 模块化的一种实现形式，还有其余 CSS 模块化实现形式吗？
有的，比方 BEM 命名标准，还有下节会介绍的 CSS in JS
这里简略介绍下 BEM
🌲 拓展浏览：
- CSS Modules 用法教程
- BEM 官网标准
2. CSS in JS
CSS in JS，顾名思义就是将利用的 CSS 款式写在 JavaScript 文件外面，应用 JS 语言来写 CSS，包含代替原先写后缀为
.css、.less、.scss等文件
2.1 styled-components
styled-components 是 CSS in JS 实现计划中比拟出名的，大多用于 React，通过应用 es6 语法的标签模板字符串语法为 component 定义 css 属性，咱们不必在设置
className类名啦～ 咱们看看那上面这个 demo 👇👩🎓 啊雪同学：styled-components 是为 React 而生的，那 Vue 能应用吗？
答：能够的，styled-components team 专门为 Vue 开发了一个 vue-styled-components，和 React 的 styled-components 用法十分类似，有趣味能够玩玩，我玩得不溜（不过这个仓库✨也是有点少，看来很小众, style-component 写起来的确有点顺当）但我始终感觉 CSS-in-JS 会越来越风行 文档链接🔗
🌲 拓展：
styled-components 官网
3.CSS 原子类
其实这个概念曾经很老了，实质上也是一种编写 CSS 的思维，简而言之就是通过用原子类结构选择器，比方咱们定义一个 base.css 文件，外面定义了公共复用高的选择器，诸如
mgt20（来示意 margin-top: 20px）等等，益处在于便于抽出复用代码，进步代码复用水平，然而适度的形象也会带来了保护上的微小老本。
3.1 tailwind
tailwind 官网链接🔗其实实质上也是一种原子类思维，一个 class 代表一种 CSS 属性。长处在于它把 class 拆分到足够细，粒度很小，很好很「原子」。在国外很吃香，因为自定义属性强且类名语义话强，你再也不必为取 class 的名字很犯愁（毕竟独自一个组件开发咱们就可能须要 n 个类），自定义就像搭积木一样，但国内争议比拟大，晚期原子类在国内根本被喷，到 2020 年后却态度有所改观。咱们看下上面这段 demo，官网事例如何实现一个卡片
我这一眼齐全好多类名，然而的确看起来简略就能构建，但这粒度也太小了吧～问题也随着裸露，难记，用着用着，你就好比小时候要拿起字典来查阅单词，tailwind 宝典请查收 查阅链接 📖
轮落地利用，以后 twitter 就是基于 tailwind 进行改版的，咱们能够在控制台清晰看到
话说这个实验室还蛮有钱，资助了 vite 的广告位
🌲 拓展浏览：
- 如何评估 CSS 框架 TailwindCSS？
3.2 bulma
Bulma 是一个基于 Flexbox 布局技术的收费、开源的古代 CSS 框架，晚期接触的时候是在社区看到基于 Bulma 的 Vue.js 的轻量级 UI 组件buefy。它齐全基于 CSS，不须要 javascript。这也是他跟 boostrap 的最大区别。不过当初也不是很支流，这里不做过多论述，感兴趣同学能够深刻理解，能够看上面这个例子
学习应用 CSS 框架并不是最终目标，它只是一个晋升生产力的工具，工具的目标是用来晋升咱们开发效率，最终赋能到咱们的产品中去，所以不必太纠结有没有应用过这些框架，毕竟那么多个框架你是不可能每个都会用。换句话讲理解原理也是能够的, 能晋升本人的认知
🌲 拓展浏览：
- CSS 框架 Bulma 教程
- https://buefy.org/
4.CSS Sandbox（沙盒）
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 树中，弊病就是兼容性较差，你能够看下兼容状况🔗
🌲 拓展浏览：
- 应用 shadow DOM
请你喝杯🍵 记得三连哦～
1. 浏览完记得给🌲 酱点个赞哦，有👍 有能源
2. 关注公众号前端那些趣事，陪你聊聊前端的趣事
3. 文章收录在 Github frontendThings 感激 Star✨