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

啊乐同学：你说CSS Module是 css 模块化的一种实现方式，还有其他CSS模块化实现方式吗?
有的，比如BEM 命名规范，还有下节会介绍的 CSS in JS
这里简单介绍下BEM

本文插图
拓展阅读：
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 会越来越流行文档链接??[5]
拓展：
styled-components 官网[6]
其实这个概念已经很老了，本质上也是一种编写 CSS 的思想，简而言之就是通过用原子类构造选择器，比如我们定义一个base.css 文件，里面定义了公共复用高的选择器，诸如mgt20(来表示 margin-top: 20px )等等，好处在于便于抽出复用代码，提高代码复用程度，但是过度的抽象也会带来了维护上的巨大成本。
3.1 tailwind

本文插图
tailwind 官网链接[7]其实本质上也是一种原子类思维，一个 class 代表一种 CSS 属性。优点在于它把 class 拆分到足够细，粒度很小，很好很「原子」。在国外很吃香，因为自定义属性强且类名语义话强，你再也不用为取class的名字很犯愁(毕竟单独一个组件开发我们就可能需要n个类) ，自定义就像搭积木一样，但国内争议比较大，早期原子类在国内基本被喷，到2020年后却态度有所改观。我们看下下面这段demo ，官方事例如何实现一个卡片

本文插图
我这一眼完全好多类名，但是确实看起来简单就能构建，但这粒度也太小了吧～问题也随着暴露，难记，用着用着，你就好比小时候要拿起字典来查阅单词， tailwind宝典请查收查阅链接 [8]