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

什么是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.

以下是蒂芙尼·布朗(Tiffany Brown)所著《 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最佳实践”中进行了命名和解释，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