带有示例的原子 CSS 简介

原子 CSS 是一种基于类名的 CSS 模式，它将样式划分为单个属性，这些属性可以在任何地方通过类名进行组合以创建样式。这种模式的好处是可以快速构建页面，不需要写重复的样式，而且更容易维护。

为什么要使用原子 CSS？

原子 CSS 的好处很多，包括：

• 压缩样式表。将样式属性划分为单个类名大小相同的原子，最终样式表大小较小。
• 可复用性。使用基础类名，组合类名容易构建可复用组件。
• 简化 CSS。由于不用命名大多数样式，因此可以避免难以预测的样式副作用和命名冲突，并且也减少 CSS 文件大小。
• 可维护性。每个原子都只有一个属性，所以它们更容易被原子化的方式进行编辑和维护。

示例

以下是示例原子 CSS 类名：

/* 属性：margin | 类型：spacer | 值：2rem */
.mt-2 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 2rem;
}
.mr-2 {
  margin-right: 2rem;
}

/* 属性：padding | 类型：spacer | 值：2rem */
.pt-2 {
  padding-top: 2rem;
}
.pb-2 {
  padding-bottom: 2rem;
}
.pl-2 {
  padding-left: 2rem;
}
.pr-2 {
  padding-right: 2rem;
}

/* 属性：display | 类型：utility */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}

/* 属性：background-color | 类型：colour | 值：red */
.bg-red {
  background-color: red;
}

上述原子 CSS 类名定义了一些基础的原子类名，包括设置 margin 和 padding、设置 display 属性以及设置 background-color。

这些类名可以在任何地方使用，并通过组合类名扩展样式来创建更高级的样式。例如，以下代码片段使用 .mt-2 类名来指定元素的上外边距为 2rem：

<div class="mt-2">Some content here.</div>

结论

原子 CSS 的理念是简单的，但它可以提高网站构建效率，减少冗余代码，并且通过定义一些基本原子类名最终生成的 CSS 体积小，这很有利于网站性能优化。

原子 CSS 需要在初始阶段开发时进行规划和定义，这需要你和你的代码团队一起努力。如果你正在开发一个组件化的网站或者移动应用程序，这种模式可能是一个很好的选项，因为它会在不同界面、模块中产生一致的外观。