这几个CSS概念你了解吗？

1. CSS Module

CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。

答：不是的，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 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了

有的，比如BEM 命名规范，还有下节会介绍的 CSS in JS

这里简单介绍下BEM

? 拓展阅读：

• CSS Modules 用法教程
• BEM 官方规范

2. CSS in JS

2.1 styled-components

答：可以的，styled-components team 专门为Vue开发了一个 vue-styled-components，和React的styled-components用法非常相似，有兴趣可以玩玩，我玩得不溜（不过这个仓库✨也是有点少，看来很小众, style-component写起来确实有点别扭）但我始终觉得 CSS-in-JS 会越来越流行 文档链接?

? 拓展：

styled-components 官网

3.CSS 原子类

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 框架 Bulma 教程
• buefy.org/

4.CSS Sandbox（沙盒）

最早期的实现方式应该就是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

?酱往期文章：

• 从0到1开发可视化数据大屏（上）
• 树酱的前端知识体系构建（上）
• 树酱的前端知识体系构建（下）
• 聊聊前端开发日常的协作工具
• babel配置傻傻看不懂
• 如何更好管理 Api 接口
• 面试官问你关于node的那些事
• 前端工程化那些事
• 你学BFF和Serverless了吗
• 前端运维部署那些事

请你喝杯? 记得三连哦～

1.阅读完记得给? 酱点个赞哦，有? 有动力

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨