摘要：的名称来源于该方法学的三个组成部分的英文首字母，分别是块元素和修饰符。这三个不同的组成部分称为实体。不推荐在元素中嵌套其他元素。其次，不再存在复杂的层级关系，浏览器渲染的时候，样式系统从最右边的选择符开始向左进行匹配规则。
Why use it
近几年web应用的发展可以用疯狂来形容，依靠浏览器的支持以及前端技术和框架的发展，很多应用已经把大量的逻辑从服务器端迁移到了浏览器端，使用前后端分离技术，浏览器端与用户进行交互来完成复杂的逻辑。由于这个发展趋势，Web应用的前端代码的复杂度大大提高，尤其是 JavaScript 和 CSS 代码的数量大幅增加，面对空前庞大的css和js代码量，形成科学的代码组织方法和命名规范迫在眉睫。
好的命名规则应该满足以下几个优点：
安全的命名，不会干扰其它css
我需要很快知道一个 class 位于这个伟大工程的什么位置
class 尽可能少，且结构清晰
嵌套不可以太深，否则会形成难以维护的“谜”之样式
BEMBEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。这三个不同的组成部分称为 BEM 实体。
Block——块块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的，可以在应用开发中进行复用，从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置，也可以互相嵌套。
Element——元素元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
Modifier——修饰符修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
// 简单地说
.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }
举个栗子
如何使用呢BEM命名方法呢？请先看以下例子：
//我们要为这个菜单写样式
放在以前，我们或许会这么写：
看了一下，还是多清爽的。但是各位朋友是否注意到了一个问题：子元素item和其父元素menu，从命名上看，关系似乎太不紧密。一个box也可以有item子类，一个xxx也可以包含一个item子类。看看其样式的写法：
//sass
.nav {
list-style: none;
.item {
font-weight: bold;
&.selected {
color: red;
}
}
}
//编译后产生的css
.nav {
list-style: none;
}
.nav .item {
font-weight: bold;
}
.nav .item.selected {
color: red;
}
从样式文件上看，仿佛也没有太大问题，但是，这是在我们代码层数较少的情况。如果是一个复杂的页面元素，我们sass层级会非常深。编译后的css，层级也会很深。
2.BEM命名现在我们使用BEM再来编写看看：
//sass
.nav {
list-style: none;
&__item {
font-weight: bold;
&--selected {
color: red;
}
}
}
//使用sass编译后的css是
.nav {//菜单
list-style: none;
}
.nav__item {//菜单item
font-weight: bold;
}
.nav__item--selected { //被选中的菜单item
color: red;
}
乍看之下，根据 BEM 命名规则产生的 CSS 类名都会很复杂，但实际上在熟悉了命名规则之后，可以很容易理解其含义。其次，css不再存在复杂的层级关系，浏览器渲染的时候，样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出，减少层级就能提升性能，对应静态css文件大小也会减少。
很多人会吐槽两个下划线和两个横杠作为连接符，并不优雅。但是我觉得，BEM是一种思想，是我们需要理解的，至于我们用什么样的连接符，什么样的方式实现，可以根据自己项目的情况考虑。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112934.html
摘要：的名称来源于该方法学的三个组成部分的英文首字母，分别是块元素和修饰符。这三个不同的组成部分称为实体。不推荐在元素中嵌套其他元素。其次，不再存在复杂的层级关系，浏览器渲染的时候，样式系统从最右边的选择符开始向左进行匹配规则。 Why use it 近几年web应用的发展可以用疯狂来形容，依靠浏览器的支持以及前端技术和框架的发展，很多应用已经把大量的逻辑从服务器端迁移到了浏览器端，使用前后...
摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。 前端编码规范之：Git使用规范 前端编码规范之：样式（scss）编码规范 前端编码规范之：HTML结构规范 前端编码规范之：Vue最佳实践 前端编码规范...
摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...
阅读 3480·2023-04-26 02:44
阅读 1621·2021-11-25 09:43
阅读 1509·2021-11-08 13:27
阅读 1880·2021-09-09 09:33
阅读 898·2019-08-30 15:53
阅读 1762·2019-08-30 15:53
阅读 2771·2019-08-30 15:53
阅读 3106·2019-08-30 15:44
