什么是 BEM 以及为什么使用它来命名 HTML 类！

大家好！
今天我要聊聊我在 Web 开发项目中用到的工具之一：BEM，它让我的代码更漂亮，生活也更轻松！

什么是 BEM？

BEM（块、元素、修饰符）是由Yandex开发的 HTML 和 CSS 类的命名约定。
本质上，它是一种方法论，可以帮助你更好地理解 HTML 和 CSS 之间的关系，并更好地进行样式设计。

为什么要使用 BEM？

当然，你不必这么做。那么为什么要用它呢？

• BEM 为您的代码提供了一些结构，使用起来非常简单。
• 它使设置 HTML 元素的样式和阅读变得更容易。
• 它有助于避免风格冲突，
• 一致性！！！

那么，我该如何使用它？

好的，让我们进入有趣的部分！

<div class="hero">
   <img class="hero__img">
</div> 

<div class="main">
    <h1 class="main__title">
    <p class="main__text"></p> 
    <p class="main__text-special"></p>  
    <p class="main__text"></p>
</div>

这里有一段非常简单的代码。
块：
<div> 是我们的块。块元素只需要一个好记的名称，在本例中，我们用的是 hero 和 main。

元素：
元素是我们放入块中的项目。它们是块的一部分，因此它们首先获得块的名称。
它们的第二个名称应该是对其内容的描述。例如，我们有：
“main__text”、“main__title”和“hero__img”。

修饰符：
虽然你可能比前两个修饰符用得少一些，但修饰符很重要。它们告诉你某些项目可能很特殊，但仍然是一个元素。我们的第二个 < p > 名为“main___ text-special”。
也许这个修饰符的字体会更大，背景会更亮。谁知道呢？
不过，虽然它仍然是一个“main__ text”，但添加“-special”表示它将具有差异。

那些 __ 和 - 怎么样？

这就是 BEM 的工作方式。
块只需要一个名称，元素需要块名称、__ 以及元素名称，修饰符需要上面的 - 以及修饰符名称。

结论

我尽量以代码新手的水平来解释，希望对大家有所帮助。BEM
是一种非常有用的方法论，偶尔不使用它，肯定会遇到一些风格传承的问题，哈哈。

*PS：如果您想要更完整的内容，Smashing Magazine有一篇很棒的初学者文章！*