理解BEM的命名方式

﹏ヽ暗。殇╰゛Y 2023-06-09 07:59 27阅读 0赞

**一、什么是BEM？**

BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么网站页面，都可以拆解成这三部分。

**二、带你认识网页**

我们来看一下qq的官网，它可以由三个块组成：logo，导航nav和页面主题mian三个模块构成，如果再细分一下呢？logo是由图片和文字两个元素组成，导航由三个元素组成，页面主题中包含图片，文字和按钮三个元素，

如果把一个块看作是一个数组的话，那么元素就是数组中的每一项。

什么是修饰符呢？你可以看作是元素的属性，或者是他的形态、状态，比如导航中的三个元素有的长，有的短，页面主体文字有的大，有的小

![format_png][]

**三、BEM命名如何书写**

BEM给我们的规定是块和元素之间用 — 连接，元素和修饰符之间用 \_  连接。例如：我们要设置表格某一行的背景颜色为红色，我们可以如下命名

**四、实战篇**

下面，我们来用bem的命名规范来写一下qq的官网

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<header>
            <div class="logo">
                <img class="logo-img" src="./logo.png" alt="">
                <span class="logo-words_big">QQ·</span>
                <span class="logo-word_small">PC版</span>
            </div>
            <ul class="nav">
                <li class="nav-item">QQ官网首页</li>
                <li class="nav-item">申请QQ</li>
                <li class="nav-item">当前在线用户:2559393943</li>
            </ul>
        </header>
        <div class="main">
            <img class="main-img" src="./img.png" alt="" >
            <div class="main-words_small">QQ PC版9.0.8</div>
            <div class="main-words_big">从新出发·趣无止境</div>
            <button class="mian-button_blue">立即下载</button>
        </div>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

是不是清晰了很多，即使是换作另一个人修改这个页面也是一眼就能找到的。**这样就大大减少了我们的维护成本。**

**五、拓展**

如果你还是不太理解什么是BEM，没关系，我们和人体结合一下，看看他们之间有什么相似之处。

![format_png 1][]

上面是一张小女孩的人体结构图，我们可以把她分成三个部门，也就是三个块（Block），分别是头（header），身体(body)和脚(footer)，我们单看头部，里边有很多个元素（Element）组成，比如头发（hair）、眼睛（eye）、耳朵（ear）、牙齿（tooth）等等，

身体里呢？包含胳膊（arm）、手指（finger）等元素构成，脚部由脚（foot）和脚趾（toe）组成。小女孩的头发是棕色的(brown)，好了，我们可以用BEM规范来命名一下小女孩的结构了

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

**六、结束语**

BEM是一个非常有用，强大，简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。它对前端开发者都是一个巨有价值的工具。

[format_png]: /images/20230531/11b5c0125ad74bae9099880cba3b4de4.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230531/68facf6b62404909a8eba66d6bcc3dfc.png
[format_png 1]: /images/20230531/df130a6f73744fefa4fa2ce5cdbcf22d.png