BEM命名规范

Posted 2020-10-01

　　谨以此文告诫自己浪费12个小时的教训。

    BEM的意思是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种命名方法让你的css类对其他开发者来说更加透明而且更有意义。在此介绍的是在原始的BEM的基础上改进的版本。

    命名约定模式如下：

.block{}

.block_element{}

.block_modifier{}

block代表更高级别的抽象或组件。

block_element代表block的后代，用于形成一个完整的block。

block_modifier代表block的不同状态，或不同版本。

之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.sit-search{}       /*块*/

.sit-search_field{}         /*元素*/

..sit-search--full{}         /*修饰符*/

用常规的css方式命名：

<form class="sit-search full">
       <input type="text"   class="field">
       <input type="submit"   value="search"   class="button">
</form>
       

这些类名太不精确了，不能告诉我们足够的信息，用ＢＥＭ记号法是下面这样：

<form class="sit-search sit-search－－full">
       <input type="text"   class="sit-search＿field">
       <input type="submit"   value="search"   class="sit-search＿button">
</form>

我们能清晰的看到有个叫．ｓｅａｒｃｈ的块，内部是一个．ｓｉｔ－ｓｅａｒｃｈ＿ｆｉｅｌｄ并且sit-search还有另一种形态．sit-search－－full。

再举个例子，用BEM写的代码：

<div  class="media">
    <img arc="logo.png" alt="Foo Corp logo"  class="media_img--rev">
    <div class="media_body">
          <h3 class="alpha">Welcome to Foo Corp</h3>
          <p class="lede">Foo Corp is the best,seriously!</p>
    </div>
</div>

这段代码一眼就能看明白media是一个块，而media_img--rev是加了修饰符的media_img的变体，属于media的元素，而media_body是一个尚未被改变过的属于media的元素。

没必要在每个地方都用上BEM，如：

.caps{text-transform:uppercase;}

这条不属于任何一个ＢＥＭ范畴，仅是一个单独的样式。

另一个没有使用ＢＥＭ的是：

．ｓｉｔ－ｌｏｇｏ｛｝

这是一个ｌｏｇｏ，可以把它写成ＢＥＭ格式：

．ｈｅａｄｅｒ｛｝
．ｈｅａｄｅｒ＿ｌｏｇｏ｛｝

但没必要这么做，这个例子中网站ｌｏｇｏ恰巧在ｈｅａｄｅｒ内部，它也有可能在侧边栏或页脚里，一个元素的范围可能开始于上下文，因此要确定只在需要用到ＢＥＭ的地方才使用它。

　　　ＢＥＭ最难的部分之一是明确作用域从哪开始到哪结束，以及什么时候使用它。随着接触的多了，慢慢就知道怎么用了。ＢＥＭ是一个非常有用、强大、简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作、控制，更加健壮和明确而且更加严密。

　　ＰＳ：此文原为一大神整理而来，印象深刻，固而，想在此记录下来。原文出处不知。