当你看到一个class的时候，你想得到什么？

这个class用在什么地方，作用是什么？
是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？
class 是否在js中被使用？
等等等等

此时，你最想一眼看到这个class就解决以上所有的问题，那么就引入了今天的主题 BEM—css命名规范

当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时，脸上笑嘻嘻，心里***。当我第一次看到这样的css的时候，我也没法冷静的看完，但是当你在工作中使用这些css命名规范的时候，不知不觉你会发现，这些符号带来的优势，要远比多写几个字符要多的多

BEM介绍

BEM，它代表 block ， element 和 modifier ，blcok可以理解成独立的块，在页面中该块的移动并不会影响到内部样式（和组件的概念类似，独立的一块），element就是块下面的元素，和块有着藕断丝连的关系，modifier是表示样式大小等
BEM是一种非常有用，功能强大且简单的命名约定，它使您的前端代码更易于阅读和理解，易于使用，易于扩展，更健壮和明确，并且更加严格。
BEM方法可确保参与网站开发的每个人都使用单一代码库，并且使用相同的语言。使用正确的命名将使您为网站设计的更改做好准备。
BEM可以用于js中，在JavaScript中并进行模板化，但是需要特殊的框架（暂不深入探索）

BEM的写法

block__element–modifier 或者 block__element_modifier（个人更倾向于第一种写法）
单词之间使用（-）分隔（file-name）
元素名称通过双下划线（__）与块名称分隔(block__element)
修饰符名称通过单个下划线（–）与块或元素名称分隔，也可以使用_(block–modifier / element–modifier)

这部分是elementUI部分代码写法，使用的也是BEM写法

<div class="el-row"><button class="el-button el-button--primary">主要按钮</button><button class="el-button el-button--success">成功按钮</button><div class="el-row__wrap><p class="el-row__wrap--bar"></p> </div>
</div>

注：

BEM方法中不存在元素的元素，即block-block
尽量不使用id选择器
合理使用层级，层级最好不要超过4层，不便于阅读，臃肿

错误的用法

<div class="header"><div class="header-scope"><div class="header-scope__logo"><img src="" class="header-scope__logo__img" /></div><div class="header-scope__operate"><input type="text" class="header-scope__operate__input header-scope__operate__input--focus" /></div></div>
</div>

修改后的用法

<div class="header"><div class="header-scope"><div class="logo"><img src="" class="logo__img" /></div><div class="operate"><input type="text" class="operate__input operate__input--focus" /></div></div>
</div>

利用sass可以很方便的简写BEM

.el{&-button{width: 100%;&--primary{color: blue;}&--success{color: green;}}&-row{font-size: 20px;&__wrap{color: red;&--bar{background-color: #ccc;}}}
}

转换后

.el-button {width: 100%;
}
.el-button--primary {color: blue;
}
.el-button--success {color: green;
}
.el-row {font-size: 20px;
}
.el-row__wrap {color: red;
}
.el-row__wrap--bar {background-color: #ccc;
}

只使用BEM，还不能够完全表达出class的所有含义，因此可以使用部分命名空间来增强class的表达

.l-: 布局(layouts)
.o-: 对象(objects)
.c-: 组件(components)
.js: js的钩子(JavaScript hooks)
.is-|.has-: 状态类(state classes)
.t1|.s1: 排版大小(typography sizes)
.u-: 实用类(utility classes)

关注我：前端Jsoning

2020年你还没用BEM？相关推荐

cdialog创建后马上隐藏_都2020了，你还没用上这些Windows的“隐藏神技能”？
如今,电脑系统的天下都被Windows和macOS给占领了,那么它们之间的较量自然是不少.关于它们谁更好用的话题从来就没断过,也从来没有什么标准答案,只能说是萝卜青菜各有所爱吧.可每次看到那些说Wi ...
优质神器！推荐7个小众好用的软件，也许你还没用过
推荐7个小众好用的软件,也许你还没用过. 1.词根词缀记忆词典词根词缀字典是一款专门查询单词记忆法的字典.词根.词缀.词源,口诀.谐音.谐音.对照.看图背单词等等应有尽有!软件总结了上千余条词根和近 ...
什么？你还没用过 Cursor？智能 AI 代码生成工具 Cursor 安装和使用介绍
作者:明明如月学长, CSDN 博客专家,蚂蚁集团高级 Java 工程师,<性能优化方法论>作者.<解锁大厂思维:剖析<阿里巴巴Java开发手册>>.<再学经 ...
2020，你还相信微服务？
最近几年,微服务大行其道.在业务模型不完善,超大规模流量的冲击的情况下,许多企业纷纷抛弃了传统的单体架构,拥抱微服务.这种模式具备独立开发.独立部署.可扩展性.可重用性的优点的同时,也带来这样一个问题 ...
求老板放过！我Java8还没用呢，Java14又来了...
英文:Oracle,翻译:CSDN,作者:Raoul-Gabriel Urma 链接:blogs.oracle.com/javamagazine/java-14-arrives-with-a-host ...
特斯拉中国工厂2020投产，还可能为完全自动驾驶更新硬件
夏乙发自凹非寺量子位出品 | 公众号 QbitAI 大约三个月前,特斯拉股价涨到363.53美元,市值606.68亿,力压通用汽车和福特,成了全美市值第一的汽车公司.今年9月,特斯拉股价更是涨 ...
5G还没用上，4G却越来越慢了？
4G 变慢,不是 5G 的「锅」,至少不全是. 最近 4G 的网络体验越来越不尽如人意了. 某个时段.某个地点,时常会出现网页打开困难的情况,仿佛一夜之间回到了 2G.3G 的「龟速」网上冲浪年代.只 ...
【校园卡】校园卡最近消息:2020校园卡还未停售，更新最新海报
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 大家都比较关心今年的停售时间,最近确认了联通和电信的校园卡都还没有停售,不过按往年经验 ...
2020学Java还吃香吗？Java行业现在饱和了吗？
最近从Java培训班毕业了,对于学习Java许多人质疑2020年是否是已经饱和,现在工作很难找到.实际上我刚开始学的时候对此也是很担心,但是我看见在Java培训班的学生,都很快的找到了工作,我自己也去 ...

2020年你还没用BEM？