Atomic CSS 旨在使用作为单一用途的样式单元的类来解决一些传统的 CSS 问题。 Atomic CSS 使用不可变类，这些类完全负责将单元样式应用于 UI 的选定组件。简而言之，Atomic CSS 是一种样式的一种规则。它试图以可预测的方式使样式更具可变性。
传统 CSS 的问题： CSS 被广泛用于为 Web 应用程序提供样式。像 Sass 和 LESS 这样的 CSS 预处理器用于使样式变得简单。但是，在开发一个庞大的Web应用程序的过程中，整个应用程序中使用的样式有很多重复。 CSS代码重复的原因有几个，比如：
- 使用不同组件的不同开发人员可能会使用自己喜欢的样式编写自己的 CSS 代码
- 样式上有细微差别的组件在其中具有样式重复的主要属性
除了这些问题之外，由于担心覆盖 CSS，构建庞大的 Web 应用程序会在开发人员中造成混淆。这使得开发更加耗时和低效。
Atomic CSS解决的问题 使用 Atomic CSS 解决以下问题：
- 减少代码的冗余或重复。
- 覆盖 CSS 的困惑。
- 关于不同开发人员在应用程序的不同部分工作的问题。
- 减少调试样式所消耗的时间。
保持原子 CSS 类中的一致性：在开发类时，可以通过遵循特定的样式来保持原子 CSS 中类的一致性。这可以使用以下步骤完成：
- 请参阅原子 CSS 参考页面。
- 需要创建的类的类型可以在这个网站上输入和搜索。
- 网站将返回要使用的类名作为结果，所有开发人员都可以在代码中使用它，以保持代码的一致性。
示例 1：此示例演示了一个简单的 Atomic CSS 工作示例。
-
第 1 步：创建一个 HTML 文档并添加网站的起始代码。创建一个样式表并将其链接到此 HTML 文档。
-
第 2 步：在正文中，添加一个部门标签以及带有文本的标题标签，类如下所示：
html
GfG Atomic CSS Example Geeks For Geeks
html
GfG Atomic CSS Pseudo Class Example Geeks For Geeks
- 第三步：在样式表中定义HTML页面使用的类，并根据类名添加需要的样式。
.Bgc\(\#00FF00\) { background-color: #00ff00; } .C\(\#FFFFFF\) { color: #ffffff; }顾名思义， Bgc(#00FF00)用于添加绿色(#00FF00)作为背景色， C(#FFFFFF)用于添加白色(#FFFFFF)作为文本颜色。此示例现在可以在浏览器上运行。
输出：
伪类：这些是添加到选择器中以指定特定状态的元素。一些伪类及其相应的后缀映射如下：
| Pseudo Class | Suffix Map |
|---|---|
| :focus | f |
| :active | a |
| :hover | h |
| :checked | c |
示例 2：在此示例中，伪类与 Atomic CSS 一起使用。
第 1 步：创建一个 HTML 文档并添加网站的起始代码。创建一个样式表并将其链接到此 HTML 文档。
第 2 步：添加一个容器类，它的第一个子分区包含标题文本。
html
GfG Atomic CSS Pseudo
Class Example
Geeks For Geeks
第三步：在样式表中定义HTML页面使用的D(1):h类，并根据类名添加所需的样式。
.D\(1\)\:h:hover {
background-color: green;
color: white;
}
顾名思义， D(1)是容器内的第一个子分区。添加一个悬停伪类，如D(1):hover，并将其表示为D(1):h使其符合 Atomic CSS 语法。因此，使用 :hover 伪类，只要将元素悬停在上面，就会应用给定的样式类。
- 悬停前：
-
悬停后：
