无论您是刚刚发现BEM，还是老手，你可能欣喜的发现这是一个多么有用的方法论。 如果你不知道BEM是什么，我建议你去看看BEM官网，然后继续这篇文章，因为文章中的一些术语需要对这种CSS方法有基本了解。

 

本文旨在帮助BEM爱好者或者有兴趣了解它的开发者更有效的使用它。

 

我一直不认为他是一种最优雅方式来命名css样式。让我抛弃它这么长时间原因很多，其中有一点就是令人尴尬的语法。作为设计师的我不希望我性感的标题夹杂着肮脏的双重下划线和恶劣的双连字符。

 

但是作为开发者的我务实的看了一下，最终，构建用户界面的模块化方式和逻辑战胜了我右脑的抱怨。我确实不建议让它作为自己的客厅核心，但是当你需要一件救生衣（想象你在一个css的大海上），我想功能大于形式。无论如何，有的聊了。这里是我为之斗争的10个困境，及其解决方案

 

1. 当遇到孙子（或者更下级）选择器时怎么办？

 

申明一下，当你需要引用嵌套两层深度的元素时就会用到孙子选择器。这些熊孩子是我生命中的祸害，我确信他们的滥用时人们厌恶BEM的原因之一。我给个例子：

 

<div class="c-card">

 

    <div class="c-card__header">

 

        <!-- Here comes the grandchild… -->

 

        <h2 class="c-card__header__title">Title text here</h2>

 

    </div>

 

    <div class="c-card__body">

 

        <img class="c-card__body__img" src="some-img.png" alt="description">

 

        <p class="c-card__body__text">

 

            Lorem ipsum dolor sit amet, consectetur

 

        </p>

 

        <p class="c-card__body__text">Adipiscing elit.

 

            <a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet

 

            </a>

 

        </p>

 

    </div>

 

</div>

 

可以想像这样的命名会很快失控。而且越嵌套名字越可恶，不可读。我试着用了一个很短的块名和body、link等短元素名，但当初始块名是c-drop-down-menu 的时候会是什么样子？

 

我相信双下划线模式在选择器名称中只能出现一次。BEM 指的是 BlockElement–Modifier, 而不是 BlockElement__Element–Modifier。所以需要避免多级元素命名。如果你写出了一个很深的岁子级别命名那么你需要重新考虑一下你的组件结构了。

 

BEM并不严格的与DOM挂钩，所以元素层级嵌套的多少层也没关系。命名约定是为了更好的识别顶级组件模块如c-card.

 

下面是我怎么处理这个card组件的

 

<div class="c-card">

 

    <div class="c-card__header">

 

        <h2 class="c-card__title">Title text here</h2>

 

    </div>

 

    <div class="c-card__body">

 

        <img class="c-card__img" src="some-img.png" alt="description">

 

        <p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>

 

        <p class="c-card__text">Adipiscing elit.

 

            <a href="/somelink.html" class="c-card__link">Pellentesque amet</a>

 

        </p>

 

    </div>

 

</div>

 

这意味着所有的后代元素只会收到card模块的影响，所有我们可以将img移动到c-card_header里面去或者添加c-card_footer不会影响语义结构。

 

2. 应该添加命名空间吗？

 

你可能已经注意到了我在代码示例中使用了c- 字母。这个c代表’component’，也代表着我的BEM命名空间的基调。这个想法源自Harry Robert的命名空间技术 ，它提高了代码的可读性。

 

我发现用了这样的命名空间是我的代码可读性大大提高。即使我不会在BEM上打包卖给你，但它的确是一个关键的外卖。你可以采用其他的命名空间，像qa-来表示 qa测试，ss- 来和服务器挂钩。但是上面列表里面是一个恒好的起点，你可以在使用BEM时候将他介绍给你的同事。

 

在接下来的一个问题里你就会知道这命名空间是一个很好的解决方案

 

3. 我该怎么命名我的容器

 

很多组件都需要一个父容器来标识字元素的布局。这种情况下，我们总是试图将这个容器抽象为一个布局模块，比如l-grid 然后将其他模块作为l-grid_item的内容插入其中。

 

在我们的例子中，如果我们想要一个卡片列表。我们可以这么写：

 

<ul class="l-grid">

 

    <li class="l-grid__item">

 

        <div class="c-card">

 

            <div class="c-card__header">

 

                […]

 

            </div>

 

            <div class="c-card__body">

 

                […]

 

            </div>

 

        </div>

 

    </li>

 

    <li class="l-grid__item">

 

        <div class="c-card">

 

            <div class="c-card__header">

 

                […]

 

            </div>

 

            <div class="c-card__body">

 

                […]

 

            </div>

 

        </div>

 

    </li>

 

    <li class="l-grid__item">

 

        <div class="c-card">

 

            <div class="c-card__header">

 

                […]

 

            </div>

 

            <div class="c-card__body">

 

                […]

 

            </div>

 

        </div>

 

    </li>

 

    <li class="l-grid__item">

 

        <div class="c-card">

 

            <div class="c-card__header">

 

                […]

 

            </div>

 

            <div class="c-card__body">

 

                […]

 

            </div>

 

        </div>

 

    </li>

 

</ul>

 

现在你应该形成一个固有思想，布局模块和组件命名空间怎么结合使用了。

 

不要害怕使用一些额外的标记来解决麻烦。没有人会拍着你的后背让你删去那几个div标签的。