无论是什么网站页面
一、什么是BEM?
BEM代表块(Block),元素(Element),修饰符(Modifier)。无论是什么网站页面,都可以拆解成这三部分。
二、带你认识网页
我们来看一下qq的官网,它可以由三个块构成:logo,导航nav和页面主题mian三个模块组成,如果再细分一下呢?logo是由图片和文字两个元素构成,导航由三个元素构成,页面主题中包罗图片,文字和按钮三个元素,
如果把一个块看作是一个数组的话,那么元素就是数组中的每一项。
什么是修饰符呢?你可以看作是元素的属性,或者是他的形态、状态,好比导航中的三个元素有的长,有的短,页面主体文字有的大,有的小
三、BEM定名如何书写
BEM给我们的规定是块和元素之间用 — 连接,元素和修饰符之间用 _ 连接。例如:我们要设置表格某一行的配景颜色为红色,我们可以如下定名
四、实战篇
下面,我们来用bem的定名规范来写一下qq的官网
<header> <div class="logo"> <img class="logo-img" src=http://www.mamicode.com/"./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=http://www.mamicode.com/"./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>是不是清晰了很多,即使是换作另一小我私家改削这个页面也是一眼就能找到的。这样就大大减少了我们的维护本钱。
五、拓展
如果你还是不太理解什么是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>六、结束语
BEM是一个非常有用,强大,,简单的定名约定,以至于让你的前端代码更容易阅读和理解,更容易协作,更容易控制,越发健壮和明确而且越发严密。它对前端开发者都是一个巨有价值的工具。
原文:https://www.bbsmax.com/A/kjdwbexq5N/
更好用的css定名方法——BEM定名
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30987.html