更好用的css命名方式——BEM命名

1、什么是BEM？

　　BEM表明块（Block），元素（Element），修饰符（Modifier）。不管是什么网站页面，均可以拆解成这三部分。

2、带你认识网页

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

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

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

3、BEM命名如何书写

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

4、实战篇

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

　　<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>

是否是清晰了不少，即便是换做另外一我的修改这个页面也是一眼就能找到的。这样就大大减小了咱们的维护成本。

5、拓展

　　

　　若是你仍是不太理解什么是BEM，不要紧，咱们和人体结合一下，看看他们之间有什么类似之处。

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

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

<div class="header">
        <div class="header-hair_brown"></div>
        <div class="header-eye"></div>
        <div class="header-ear">
            <div class="header-ear_left"></div>
            <div class="header-ear_right"></div>
        </div>
        .......
    </div>
    <div class="body">
        <div class="body-arm">
            <div class="body-arm_left"></div>
            <div class="body-arm_right"></div>
        </div>
        <div class="finger"></div>
        .......
    </div>
    <div class="footer">
        <div class="footer-foot"></div>
        <div class="footer-toe"></div>
    </div>

6、结束语

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

原文：https://www.bbsmax.com/A/kjdwbexq5N/