什么是css原子类_了解CSS架构：原子CSS

小咪咪 2022-12-03 01:48 240阅读 0赞

什么是css原子类

*The following is an extract from our book, [CSS Master][], written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form [here][CSS Master].*

*以下是蒂芙尼·布朗(Tiffany Brown)所著《 [CSS Master》][CSS Master]一书的摘录。* *副本在世界各地的商店中都有出售，您也可以在[这里][CSS Master]以电子书的形式购买。*

If BEM is the industry darling, Atomic CSS is its rebellious maverick. Named and explained by Thierry Koblentz of Yahoo in his 2013 piece, [Challenging CSS Best Practices][], Atomic CSS uses a tight library of class names. These class names are often abbreviated and divorced from the content they affect. In an Atomic CSS system, you can tell what the class name does; but there is no relationship between class names—at least, not those used in the stylesheet—and content types.

如果说BEM是行业宠儿，那么Atomic CSS就是它的反叛特立独行者。 由Yahoo的Thierry Koblentz在他的2013年论文“具[有挑战性CSS最佳实践”][Challenging CSS Best Practices]中进行了命名和解释，Atomic CSS使用了紧密的类名库。 这些类名通常被缩写，并与它们影响的内容分开。 在Atomic CSS系统中，您可以知道类名的作用； 但是类名称(至少不是样式表中使用的名称)与内容类型之间没有关系。

Let’s illustrate with an example. Below is a set of rules in what we might call a conventional CSS architecture. These rule sets use class names that describe the content to which they apply: a global message box, and styles for “success,” “warning,” and “error” message boxes:

让我们用一个例子来说明。 以下是我们可以称为常规CSS体系结构的一组规则。 这些规则集使用描述其应用内容的类名称：全局消息框，以及“成功”，“警告”和“错误”消息框的样式：

.msg {
      background-color: #a6d5fa;
      border: 2px solid #2196f3;
      border-radius: 10px;
      font-family: sans-serif;
      padding: 10px;
    }
    .msg-success {
      background-color: #aedbaf;
      border: 2px solid #4caf50;
    }
    .msg-warning {
      background-color: #ffe8a5;
      border-color:  #ffc107;
    }
    .msg-error {
      background-color: #faaaa4;
      border-color: #f44336;
    }

To create an error message box, we’d need to add both the `msg` and `msg-error` class names to the element’s `class` attribute:

要创建错误消息框，我们需要将`msg`和`msg-error`类名称都添加到元素的`class`属性中：

<p class="msg msg-error">An error occurred.</p>

Let’s contrast this with an atomic system, where each declaration becomes its own class:

让我们将其与原子系统进行对比，在原子系统中，每个声明成为其自己的类：

.bg-a {
      background-color: #a6d5fa;
    }
    .bg-b {
      background-color: #aedbaf;
    }
    .bg-c {
      background-color: #ffe8a5;
    }
    .bg-d {
      background-color: #faaaa4;
    }
    .bc-a{
      border-color: #2196f3;
    }
    .bc-b {
      border-color: #4caf50;
    }
    .bc-c {
      border-color:  #ffc107;
    }
    .bc-d {
      border-color:  #f44336;
    }
    .br-1x {
      border-radius: 10px;
    }
    .bw-2x {
      border-width: 2px;
    }
    .bss {
      border-style: solid;
    }
    .sans {
      font-style: sans-serif;
    }
    .p-1x {
      padding: 10px;
    }

That’s a lot more CSS. Let’s now recreate our error message component. Using Atomic CSS, our markup becomes:

还有很多CSS。 现在让我们重新创建错误消息组件。 使用Atomic CSS，我们的标记变为：

<p class="bw-2 bss p-1x sans br-1x bg-d bc-d">
        An error occurred.
    </p>

Our markup is also more verbose. But what happens when we create a warning message component?

我们的标记也更详细。 但是，当我们创建警告消息组件时会发生什么？

<p class="bw-2 bss p-1x sans br-1x bg-c bc-c">
        Warning: The price for that item has changed.
    </p>

Two class names changed: `bg-d` and `bc-d` were replaced with `bg-c` and `bc-c`. We’ve reused five rule sets. Now, let’s create a button:

更改了两个类名称： `bg-d`和`bc-d`分别替换为`bg-c`和`bc-c` 。 我们重用了五个规则集。 现在，让我们创建一个按钮：

Hey now! Here we’ve reused four rule sets and avoided adding any more rules to our stylesheet. In a robust atomic CSS architecture, adding a new HTML component such as an article sidebar won’t require adding more CSS (though, in reality, it might require adding a bit more). Atomic CSS is a bit like using utility classes in your CSS, but taken to the extreme. Specifically, it:

嘿，现在！ 在这里，我们重用了四个规则集，并避免在样式表中添加更多规则。 在健壮的原子CSS架构中，添加新HTML组件(如文章侧边栏)不需要添加更多CSS(尽管实际上，可能需要添加更多)。 原子CSS有点像在CSS中使用实用程序类，但是却达到了极限。 具体来说，它：

*  keeps CSS trim by creating highly granular, highly reusable styles, instead of a rule set for every component
    
    通过创建高度精细，高度可重用的样式而不是为每个组件设置规则来保持CSS修剪
 *  greatly reduces specificity conflicts by using a system of low-specificity selectors
    
    通过使用低特异性选择器系统大大减少了特异性冲突
 *  allows for rapid HTML component development once the initial rule sets are defined
    
    一旦定义了初始规则集，就可以快速开发HTML组件

However, Atomic CSS is not without controversy.

但是，原子CSS并非没有争议。

### 反对原子CSS的案例 **(**The Case Against Atomic CSS**)** ###

Atomic CSS runs counter to just about everything we’ve been taught on writing CSS. It feels almost as wrong as sticking `style` attributes everywhere. Indeed, this is one of the major criticisms of the Atomic CSS methodology: it blurs the line between content and presentation. If `class="fl m-1x"` floats an element to the left and adds a ten-pixel margin, what do we do when we no longer want that element to float left?

原子CSS几乎与我们编写CSS的所有知识背道而驰。 感觉就像在各处粘贴`style`属性一样错误。 实际上，这是对Atomic CSS方法的主要批评之一：它模糊了内容和表示之间的界限。 如果`class="fl m-1x"`将元素向左浮动并添加十像素边距，那么当我们不再希望该元素向左浮动时该怎么办？

One answer, of course, is to remove the `fl` class from our element. But now we’re changing HTML. The whole reason behind using CSS is so that markup is unaffected by presentation and vice versa. (We can also solve this problem by removing the `.fl {float: left;}` rule from our stylesheet, although that would affect every element with a class name of `fl`). Still, updating the HTML may be a small price to pay for trimmer CSS.

一个答案，当然是从我们的元素中删除`fl`类。 但是现在我们正在更改HTML。 使用CSS的全部原因是，标记不受演示的影响，反之亦然。 (我们也可以通过从样式表中删除`.fl {float: left;}`规则来解决此问题，尽管这会影响类名称为`fl`每个元素)。 尽管如此，更新HTML可能是为修整CSS付出的小代价。

In Koblentz’s original post, he used class names such as `.M-10` for `margin: 10px` and `.P-10` for `padding: 10px`. The problem with such a naming convention should be obvious. Changing to a margin of five or 20 pixels means we’d need to update our CSS *and* our HTML, or risk having class names that fail to accurately describe their effect.

在Koblentz的原始帖子中，他使用了诸如`.M-10`类名作为`margin: 10px`以及`.P-10`的`padding: 10px` 。 这种命名约定的问题应该很明显。 更改为5或20像素的边距意味着我们需要更新CSS *和* HTML，否则可能会有类名无法准确描述其效果的风险。

Using class names such as `p-1x`, as done in this section, resolves that issue. The `1x` part of the class name indicates a ratio rather than a defined number of pixels. If the base padding is five pixels (that is, `.p-1x {padding: 5px;}`), then `.p-2x` would set ten pixels of padding. Yes, that’s less descriptive of what the class name does, but it also means that we can change our CSS without updating our HTML, or without creating a misleading class name.

如本节所述，使用诸如`p-1x`类的类名可以解决该问题。 类名称的`1x`部分表示比率，而不是定义的像素数。 如果基本填充为五个像素(即`.p-1x {padding: 5px;}` )，则`.p-2x`将设置十个填充像素。 是的，这并不能说明类名的作用，但这还意味着我们可以更改CSS而无需更新HTML或创建具有误导性的类名。

An atomic CSS architecture doesn’t prevent us from using class names that describe the content *in our markup*. You can still add `.button-close` or `.accordion-trigger` to your code. Such class names are preferable for JavaScript and DOM manipulation.

原子CSS体系结构不会阻止我们使用描述*标记中*内容的类名。 您仍然可以在代码中添加`.button-close`或`.button-close` `.accordion-trigger` 。 对于JavaScript和DOM操作，此类类名称是更可取的。

### BEM与原子CSS **(**BEM versus Atomic CSS**)** ###

BEM works best when you have a large number of developers building CSS and HTML modules in parallel. It helps to prevent the kind of mistakes and bugs that are created by sizable teams. It scales well, in part, because the naming convention is descriptive and predictable. BEM isn’t *only* for large teams; but it works *really well* for large teams.

当您有大量的开发人员并行构建CSS和HTML模块时，BEM效果最佳。 它有助于防止由规模较大的团队造成的那种错误和错误。 它的扩展性很好，部分原因是命名约定具有描述性和可预测性。 BEM不仅*适用*于大型团队。 但是对于大型团队来说*确实很好* 。

Atomic CSS works better when there is a small team or a single engineer responsible for developing a set of CSS rules, with full HTML components built by a larger team. With Atomic CSS, developers can just look at a style guide—or the CSS source—to determine which set of class names they’ll need for a particular module.

如果有一个小型团队或一个工程师负责开发一组CSS规则，并且由一个较大的团队构建完整HTML组件，则原子CSS会更好地工作。 使用Atomic CSS，开发人员只需查看样式指南(或CSS源代码)，即可确定特定模块所需的类名称集。

> 翻译自: [https://www.sitepoint.com/atomic-css/][https_www.sitepoint.com_atomic-css]

什么是css原子类

[CSS Master]: https://www.sitepoint.com/premium/books/css-master
[Challenging CSS Best Practices]: http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
[https_www.sitepoint.com_atomic-css]: https://www.sitepoint.com/atomic-css/