既然您已经熟悉了这些术语，让我们在实践中看看 BEM 方法论。假设你有以下 HTML 代码：
应用以下 CSS：
现在，不要被愚弄。在到目前为止的例子中， 乌干达电报筛选 我们几乎总是有一个块、一个元素和一个修饰符，但情况并不总是如此。
例如，假设我们有一个名为 person 的块。人有腿和胳膊，也可以是女人或男人。如果我们要定义一个右撇子男性，它将是这样的：
现在您可以看到 BEM 的真正含义了。我们定义一个人，其修饰语是性别。因为无论一个人是男是女，他或她都有一只手，而手是一个元素。再次，每个人都可以是右撇子或左撇子，这又是一个修饰语。
否则，如果我们要定义一个只有一只手的普通人，我们会这样做：
如你所见，一旦你熟悉了 BEM，就可以很容易地用它来构建你的 CSS 和 HTML 结构。
BEM 的优点和缺点
优点
BEM 非常适合维护。在一个大型项目中，你有多少次不得不在别人后面工作，而你又太害怕做出任何改变，否则会导致未知的事情崩溃？通过使用 BEM，您可以知道元素的确切用途以及它可以出现在哪个块中。
类别名称合乎逻辑且直观，每个团队成员都知道该元素在网站上的作用。 BEM 为所有项目参与者提供了一种可共享的声明性语法，以使他们保持一致。
BEM 删除嵌套的 CSS 选择器。每个 HTML 元素都有自己的 CSS 类，您可以从其名称中知道其用途。一个选择器即可统治所有。
缺点
不要嵌套得太深。主要规则是使用不超过两个级别的父级和子级。
请注意你的块的范围从哪里开始。这里常见的一个错误是，当开发人员使用一个块，但没有意识到在开发的后期，同一个块会有一个父块，从而可能破坏嵌套规则。
结论
BEM 方法论极大地提高了 Web 项目的可维护性，我可以肯定地说，每个“接触”基于 BEM 的项目的开发人员都会很快熟悉整个代码结构。