CSS原子类

[jappp]

什么是CSS原子类?

通俗来讲，就是将最基础的一个样式写成通用的class类，页面标签的样式由原子类组合而成。

这是最基础的原子类示例:

.text-white {
  color: #fff;
}
.text-gray {
  color: #666;
}
.fs-12 {
  font-size: 12px;
}
.fs-16 {
  font-size: 16px;
}
.fs-24 {
  font-size: 24px;
}
.fs-36 {
  font-size: 36px;
}
.fs-48 {
  font-size: 48px;
}
.fw-bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

原子类建议命名规范：属性名-属性值，过长属性名采用缩写，中间用横杠隔开。 例如：字体颜色红色命名为text-red ，字体12px大小命名为fs-12；

优点：

1. 极致的简洁，极大减少常用CSS代码的书写。
2. 不用再想无意义的Class Name。

缺点:

1. 维护困难，在传统的 CSS 方法中，调整组件的样式和在一个 CSS 文件中更新一个类的值一样简单。使用原子 CSS，需要通过搜索每一块 HTML 来更新所述组件的每一个实例。
2. CSS与HTML耦合过多，如果修改样式，那么我需要定义新的原子类（通常不能随便修改之前的原子类），然后将新的原子类写到HTML标签的后面。如果针对要修改的元素设置一个对应的类，例如 <h1 class="mb20 f14 fb post-title">...</h1> 然后对post-title类来定义要指定的特殊样式。这时你会发现，我为什么不把前面的原子类里面的三条语句一块写进post-title类中？这样修改的话只需要修改这一个类就可以了，而不需要找到 html 中，增删原子类。

最好的 CSS 代码，是与 HTML 无关的，而原子类，让你在修改编写 CSS 的时候，增加了很多 HTML 的操作，这是最大的缺陷。

总结：

原子类其实不是一种工具，而是一种编写 CSS 的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。CSS原子化和组件化并不冲突，本质都是为了复用，「原子化」其实只是「组件化」的一种极致使用方式而已。为尽量避免使用CSS原子类的缺点，建议适当用少量的原子类而不是以此为基础构建页面，例如使用边距、字体和颜色等原子类用于解决常见的布局和样式。

推荐阅读:

CSS Utility Classes and "Separation of Concerns"