带有示例的原子 CSS 简介

Atomic CSS 旨在使用作为单一用途的样式单元的类来解决一些传统的 CSS 问题。 Atomic CSS 使用不可变类，这些类完全负责将单元样式应用于 UI 的选定组件。简而言之，Atomic CSS 是一种样式的一种规则。它试图以可预测的方式使样式更具可变性。

传统 CSS 的问题： CSS 被广泛用于为 Web 应用程序提供样式。像 Sass 和 LESS 这样的 CSS 预处理器用于使样式变得简单。但是，在开发一个庞大的Web应用程序的过程中，整个应用程序中使用的样式有很多重复。 CSS代码重复的原因有几个，比如：

除了这些问题之外，由于担心覆盖 CSS，构建庞大的 Web 应用程序会在开发人员中造成混淆。这使得开发更加耗时和低效。

Atomic CSS解决的问题使用 Atomic CSS 解决以下问题：

保持原子 CSS 类中的一致性：在开发类时，可以通过遵循特定的样式来保持原子 CSS 中类的一致性。这可以使用以下步骤完成：

示例 1：此示例演示了一个简单的 Atomic CSS 工作示例。

第 2 步：在正文中，添加一个部门标签以及带有文本的标题标签，类如下所示：



  

    
        GfG Atomic CSS Example
    
    

  

    
        
            Geeks For Geeks



  

    
        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)作为文本颜色。此示例现在可以在浏览器上运行。

输出：

示例原子 CSS 输出

伪类：这些是添加到选择器中以指定特定状态的元素。一些伪类及其相应的后缀映射如下：

示例 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 伪类，只要将元素悬停在上面，就会应用给定的样式类。

悬停前：