css编写_了解CSS编写方法

在本文中，我们将了解什么是CSS编写方法 ，一些众所周知的方法，以及它们如何对我们优化CSS代码有用。 让我们从最简单的问题入手。 什么是方法论？

方法论是方法体系 。 可以将一种方法简单地认为是一种系统地执行某项操作的方式，以某种预设的方式进行操作以达到我们想要的结果。

为了获得更好的结果， 我们会通过更好地计划方法 ，更改顺序，简化步骤来改进方法，无论哪种方法都能更快 ，更有效 。

CSS方法论

现在让我们谈谈CSS方法论。 就像生活中的所有事情一样，我们也有一种编写CSS的方法：有些首先编写重置CSS，最后一些编写布局样式，有些从两到三个用于样式化元素的类开始，有些编写所有CSS代码。一个文件。

我们的首选方法或者是随着时间的流逝而自行建立的，或者受其他因素的影响或在工作场所中必需的，或者由于上述所有原因。 但是随着时间的流逝，CSS资深人士已经制定了编写CSS的方法 ，这些方法更加灵活，定义清晰，可重用，可理解且易于管理 。

我们将研究那些公式化的方法，其中包括：

1. OOCSS （面向对象CSS）
2. BEM （块，元素，修饰符）
3. ACSS （原子CSS）
4. SMACSS （CSS的可扩展和模块化体系结构）

注意 ：以下提到的任何概念都不应与任何名称，概念与这些方法相同的框架，库或工具相混淆。 这篇文章仅涉及编写CSS的方法。

1. OOCSS

OOCSS（面向对象CSS）由Nicole Sullivan在2008年开发，其关键概念包括CSS 对象识别，结构和视觉样式的分离以及避免基于位置的样式。

在OOCSS中，Nicole提出的第一步是在CSS中标识对象 。

“基本上，CSS“对象”是重复的视觉模式，可以抽象为HTML，CSS以及可能JavaScript的独立代码段。 然后可以在整个站点中重复使用该对象。 – Github（OOCSS）的Nicole Sullivan “

以这个站点的这种结构为例。 这是一种重复的视觉模式，具有自己的独立HTML和/或CSS：

在这里，我们有两种类型的对象，一个更大的标题预览，我们将其命名为post-preview-primary以及一个带有标题的侧栏，我们将其命名为post-preview-secondary 。

我们需要分离结构和皮肤 （即创建对象外观的样式）。 两种类型的对象具有不同的结构，一种类型的对象即使看起来相似，也位于较大的框中，左侧为图像，右侧为标题。

让我们为两个对象的图像提供一个类post-preview-image并添加将图像放在左侧的代码。 这使我们不必重复将图像放在CSS对象中的位置的代码。 如果还有其他类似的对象，我们可以为它们重用post-preview-image 。

皮肤分离也可以用于简单的样式，例如边框或背景 。 如果您有多个具有相同蓝色边框的对象， 则为蓝色边框创建一个单独的类并将其添加到对象将减少必须在CSS中编码蓝色边框的次数 。

Nicole还建议不要 基于位置添加样式 ，例如，不要将特定div中的所有链接定位为突出显示，而应为这些链接提供具有适当CSS样式的荧光笔类 。 这样，当您需要突出显示页面其他部分中的链接时，可以重用荧光笔类。

2. BEM

BEM的关键概念（块，元素，修饰符）是由Yandex的开发人员于2009年开发的，其中包括识别块 ， 元素和修饰符并相应地命名它们。

“块”本质上与“对象”相同（来自之前的示例），“元素”指的是块的组件（上述preview-post-对象中的图像，标题，预览文本）。 当块或元素的状态更改时，例如，当您将活动类添加到菜单项以使其突出显示时，可以使用“修饰符”，活动类充当您的修饰符。

确定组件后，请相应命名。 例如：

• 菜单块将具有类menu
• 其项目将具有class menu__item （块和元素由双下划线分隔）
• 菜单的禁用状态的修饰符可以具有类menu_disabled （修饰符由单个下划线分隔）
• 菜单项的禁用状态的修饰符可以是menu__item_disabled 。

对于修饰符，我们还可以使用key_value格式进行命名。 例如，为了区分链接到过时文章的任何菜单项，我们可以为它们提供菜单类menu__item_status_obsolete ，并且为了给指向待处理文档的任何菜单项样式化，类名可以是menu__item_status_pending 。

命名可以修改为最适合您的名称。 这个想法是要能够从类名中识别，块，元素和修饰符 。 请查看BEM站点中列出的一些命名系统。

BEM的站点还列出了如何将块，元素和修饰符分离也带入CSS文件系统 。 诸如“按钮”和“输入”之类的块可以具有其自己的文件夹，该文件夹包含与那些块相关联的文件（.css，.js），这使我们在其他项目中导入这些块时变得更加容易。

3. ACSS

雅虎（Yahoo）在第一批产品的末尾某处出名 的21 ^世纪 ，ACSS的关键概念十年由用于造型即属性值对的最原子级别创建类，然后根据需要在HTML中使用它们。

由于该概念已经使用了一段时间，因此很难确定何时首次开发ACSS（原子CSS）。 开发人员已经使用.clearfix{overflow: hidden}类的类很长时间了。 ACSS中的想法是为我们在站点中需要的几乎所有可重用的，与内容无关的属性-值对都有一个类 ，并在需要时将这些类添加到HTML元素中。

以下是基于ACSS的类的示例以及它们在HTML中的用法。

.mr-8{margin-right: 8px;}
.fl-r{float:right;}

<div class='mr-8 fl-r'> </div>

如您所见，使用此方法时，类的数量将增加，并且所有这些类将挤满HTML。 这种方法不是100％有效的，但可以根据需要使用。 雅虎毕竟使用它。

4. SMACSS

由乔纳森·斯努克（ Jonathan Snook）于2011年开发的SMACSS（用于CSS的可伸缩和模块化体系结构）通过识别5种不同类型的样式规则来工作。 基于这些名称和文件系统创建。

“ SMACSS是检查您的设计过程的一种方法，并且是将那些刚性框架纳入灵活的思想过程的一种方法。 –乔纳森·斯努克”

SMACSS识别5种样式规则，即基本样式，布局样式，模块样式，状态样式和主题样式。

• 基本样式是针对诸如<p> ， <a:link>类的基本HTML标记的默认样式。
• 布局样式是用于定义页面布局的样式，例如用于编码页眉，页脚和侧边菜单的地方。
• 模块样式特定于诸如画廊或幻灯片放映的模块。
• 状态样式用于突出显示具有可变状态（例如隐藏或禁用）的元素。
• 主题用于更改页面的视觉方案。

可以使用类名称中的前缀来标识不同的样式规则，例如，l-header（用于布局）或t-header（用于主题）。 我们还可以通过将它们放在单独的文件和文件夹中来组织这些不同类型的规则。

您可以阅读有关SMACSS的免费在线书籍 ，也可以购买其电子书版本以进一步学习。

结论

以上CSS方法将为您提供一个系统来管理和优化CSS代码 。 它们可以组合在一起，例如OOCSS-SMACSS或OOCSS-BEM或BEM-SAMCSS来满足您的需求。

如果您想要一个自动化的系统来执行CSS方法，则还有一些框架和库，例如：

• OOCSS框架
• BEM工具
• 有机CSS框架（遵循原子概念） 。

翻译自: https://www.hongkiat.com/blog/css-writing-methodologies/