对于小型网站，CSS 代码的结构方式通常不是什么大问题。然而，当涉及到更大、更复杂的网络项目时，代码组织就变得至关重要。
这就是为什么我想在本文中向您介绍 BEM 方法论，并解释这种 CSS 实践如何通过将 CSS 类组织成独立的模块来大大提高代码的可维护性，加快开发过程并简化开发人员团队合作。
当您构建较小的网站时，如何组织样式通常不是什么大问题。您创建常用文件，编写所有必要的 CSS 即可。然而，当涉及到更大、更复杂的项目时，组织代码的方式就变得至关重要。如果您在一个由多个前端和后端开发人员组成的团队中工作，那么您的代码结构方式就更为重要。
如今，有许多方法旨在减少 CSS 代码并使 CSS 代码更易于维护。在本文中， 自营职业数据库 我将主要关注BEM方法论。 BEM 代表阻塞元素修饰符。其背后的主要思想是通过将 CSS 类组织成独立的模块来加快开发过程并促进开发人员的团队合作。
请注意，最佳做法是仅将 BEM 与类一起使用而不是与 ID 一起使用，因为类允许您在必要时重复名称并创建更一致的编码结构。另外，如果您想将网站划分为有组织的模块，它应该具有相同的结构：块、元素和修饰符。其中每个块可以有多个元素，并且块和元素都可以有多个修饰符。不过，我们首先从 BEM 的基本结构开始。
BEM的基本结构
堵塞
一个块代表您网站上的一个对象。将其视为代码的更大结构块。所有现代网站上最常见的区块是页眉、内容、侧边栏、页脚和搜索。 BEM 中的块始终是链接 CSS 类的起点。
元素
元素是块内执行特定功能的组件。它只有在块的上下文中才有意义：
修改器
修饰符是我们表示块的变化的方式。如果您曾经使用过 Bootstrap，最好的例子就是按钮大小。按钮尺寸只是按钮本身的尺寸变化，这使得它成为修饰符：
名字
BEM 方法的主要目标是使 CSS 选择器名称尽可能具有信息量且透明。原始的BEM样式定义如下：
块名称通常是一个单词“.header”，但是如果您有更长的块定义，则可以用单个破折号 - 分隔它：
元素名称以双下划线 __ 开头
修符名称以下划线 _ 开头：
BEM 方法论中只有一条非常关键的规则：修饰符不能在其元素上下文之外使用。
BEM 实践
既然您已经熟悉了这些术语，让我们在实践中看看 BEM 方法论。假设你有以下 HTML 代码：
应用以下 CSS：
现在，不要被愚弄。在到目前为止的例子中，我们几乎总是有一个块、一个元素和一个修饰符，但情况并不总是如此。
例如，假设我们有一个名为 person 的块。人有腿和胳膊，也可以是女人或男人。如果我们要定义一个右撇子男性，它将是这样的：
现在您可以看到 BEM 的真正含义了。我们定义一个人，其修饰语是性别。因为无论一个人是男是女，他或她都有一只手，而手是一个元素。再次，每个人都可以是右撇子或左撇子，这又是一个修饰语。
否则，如果我们要定义一个只有一只手的普通人，我们会这样做
如你所见，一旦你熟悉了 BEM，就可以很容易地用它来构建你的 CSS 和 HTML 结构。
BEM 的优点和缺点
优点
BEM 非常适合维护。在一个大型项目中，你有多少次不得不在别人后面工作，而你又太害怕做出任何改变，否则会导致未知的事情崩溃？通过使用 BEM，您可以知道元素的确切用途以及它可以出现在哪个块中。
类别名称合乎逻辑且直观，每个团队成员都知道该元素在网站上的作用。 BEM 为所有项目参与者提供了一种可共享的声明性语法，以使他们保持一致。
BEM 删除嵌套的 CSS 选择器。每个 HTML 元素都有自己的 CSS 类，您可以从其名称中知道其用途。一个选择器即可统治所有。
缺点
不要嵌套得太深。主要规则是使用不超过两个级别的父级和子级。
请注意你的块的范围从哪里开始。这里常见的一个错误是，当开发人员使用一个块，但没有意识到在开发的后期同一个块会有一个父块，从而可能破坏嵌套规则。
结论
BEM 方法论极大地提高了 Web 项目的可维护性，我可以肯定地说，每个“接触”基于 BEM 的项目的开发人员都会很快熟悉整个代码结构。