组织 CSS 的方法

开发者 Ben Frain 曾说过，编写 CSS 代码很容易，但很难扩展和维护。 本文介绍了用于解决此问题的解决方案集。

OOCSS

OOCSS 代表面向对象的 CSS。 此方法有两个主要理念

• 结构和设计的分离
• 容器和内容的分离

使用此结构，开发人员可以获得可以在不同位置使用的通用类。

在此步骤中，有两个消息（像往常一样，好消息和坏消息）

• 好消息：通过重用代码来减少代码量（DRY 原则）。
• 坏消息：复杂的维护。 当您更改特定元素的样式时，您很可能不仅需要更改 CSS（因为大多数类是通用的），还需要在标记中添加类。

此外，OOCSS 方法本身没有提供特定的规则，而是提供了抽象的建议，因此该方法在生产环境中的最终实现方式会有所不同。

正如发生的那样，OOCSS 中的理念启发了其他人创建他们自己的、更具体的代码结构方式。

SMACSS

SMACSS 代表 CSS 的可扩展模块化架构。 该方法的主要目标是减少代码量并简化代码维护。

Jonathan Snook 将样式划分为 5 部分

1. 基本规则。 这些是主要网站元素的样式 - body、input、button、ul、ol 等。 在本节中，我们主要使用HTML 标签和属性选择器，在特殊情况下使用类（例如，如果您有 JavaScript 样式的选择）；
2. 布局规则。 这里包含全局元素的样式，页眉、页脚、侧边栏等的大小。 Jonathan 建议在选择器中使用 id，因为这些元素在页面上不会出现超过 1 次。 但是，本文作者认为这是一个不好的做法（每当 id 出现在样式中时，世界某处的小猫都会感到难过）。
3. 模块规则。 可以多次用于单个页面的块。 对于模块类，不建议使用 id 和标签选择器（分别用于可重用性和上下文无关性）。
4. 状态规则。 在本节中，规定了模块和网站基础的各种状态。 这是唯一允许使用“！important”关键字的部分。
5. 主题规则。 您可能需要替换的设计样式。

还建议为属于特定组的类输入命名空间，以及为 JavaScript 中使用的类使用单独的命名空间。

这种方法使编写和维护代码变得更加容易，并且吸引了大量的开发人员。

原子 CSS

使用原子 CSS，为每个可重用属性创建一个单独的类。 例如，margin-top: 1px; 假设创建了一个类 mt-1 或 width: 200px; 类 w-200。

这种样式允许您通过重用声明来最小化 CSS 代码量，并且在更改技术任务时，相对容易地将更改输入模块，例如。

然而，这种方法有明显的缺点

• 类名是描述性属性名，而不是描述元素的语义性质，这有时会使开发变得复杂。
• 显示设置直接位于 HTML 中。

由于这些缺点，该方法遭到了大量批评。 然而，该方法对于大型项目可能有效。

此外，原子 CSS 用于各种框架中来指定校正元素样式，以及其他方法的某些层中。

MCSS

MCSS 是多层 CSS。 这种代码编写风格建议将样式分成几个部分，称为层。

• 零层或基础。 负责重置浏览器样式的代码（例如 reset.css 或 normalize.css）；
• 基本层包含网站上可重用元素的样式：按钮、文本输入框、提示等。
• 项目层包含单独的模块和“上下文” - 元素根据客户端浏览器、查看网站/应用程序的设备、用户角色等的修改。
• 装饰层以 OOCSS 样式编写，对元素的外观进行细微的更改。 建议只保留影响外观且不会破坏网站布局的样式（例如颜色和非关键缩进）。

层之间交互的层次结构非常重要

• 基本层定义中性样式，不会影响其他层。
• 基本层的元素只能影响其层的类。
• 项目层的元素可以影响基本层和项目层。
• 装饰层以描述性 OOCSS 类（“原子”类）的形式设计，不会影响其他 CSS 代码，并在标记中选择性地应用。

AMCSS

AMCSS 是“CSS 的属性模块”。

让我们看一个例子

<div class="button button--large button--blue">Button</div>

这样的类链并不简单，所以让我们根据属性对这些值进行分组。

这里发生了什么

<div button="large blue">Button</div>

为了避免名称冲突，最好在属性中添加命名空间。 然后我们的按钮代码将采用以下形式

<div am-button="large blue">Button</div>

如果您使用验证器检查代码，并且它不喜欢 am-button 属性，您可以在属性名前缀 data-。

使用了一个鲜为人知的选择器“~=”（IE7+），它充当类属性：它选择其属性值包含指定单词（以空格分隔）的元素。 因此，形式为 [class~="link"][class~="button"] 的选择器类似于选择器 a.link.button。 即使按特异性，因为类和属性的选择器特异性彼此相等！

相应地，CSS 代码

.button {...}
.button--large {...}
.button--blue {...}

转换为

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

如果您认为此代码太不寻常，您可以使用不太激进的 AMCSS 形式

<div am-button am-button-large am-button-blue></div>

FUN

FUN 代表选择器的扁平层次结构、实用样式、命名空间组件。

每个字母后面都有一定的原则

• F，选择器的扁平层次结构：建议使用类来选择项目，避免无故级联，并且不要使用 id。
• U，实用样式：鼓励创建用于解决典型化妆任务的服务原子样式，例如，w100 用于 width: 100%; 或 fr 用于 float: right;
• N，命名空间组件：Ben 建议添加命名空间来指定特定模块元素的样式。 这种方法将避免类名重叠。

一些开发人员注意到，使用这些原则编写的代码非常方便编写和维护； 在某种程度上，作者从 SMACSS 中汲取了精华，并以简单明了的方式阐述了这种技术。

这种方法对项目和代码结构提出了很多要求，它只确定了记录选择器的首选形式以及它们在标记中的使用方式。 但在小型项目中，这些规则足以创建高质量的代码。

结论

正如您所看到的，这些方法中没有一个是理想的。 因此，这些方法都不是绝对规则 - 您可以从头开始采取一种方法来创建您自己的东西，或者从头开始创建一种新的方法。