有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。背景最近老大在维护别人的代码的时候，发现我们团队写的样式有各种思路和风格，会增加后续维护的难度，所以老大决定统一会议名称的标准，所以他安排我考察和实践，以下是我的研究成果。什么是BEM命名规范BEM是Yandex团队提出的一种前端CSS命名规范。BEM是BlockElementModifier的缩写，其中B代表block，E代表element，M代表modifier。这三部分通常用__和--连接。即：.block__element--modifier{}Block：表示一个独立的块级元素，可以理解为功能组件块。Block是一个独立的块。比如表头是一个块，表单功能输入框是一个块。块可大可小。Element：是Block的一部分，不能独立使用。所有元素都与块密切相关。比如有一个带图标的输入框，那么这个图标就是输入框Block的一个Element，如果脱离了输入框的Block，图标就没有意义了。修饰符：用于修改块或元素，指示块或元素的外观或行为发生变化。比如上面提到的输入框Block的边框，当鼠标悬停在上面时，它的边框就会高亮，那么高亮效果就应该用Modifier来实现。上图中，绿色代表block，蓝色代表element，红色代表modifier。为什么要使用BEM？性能CSS引擎查找样式表并以从右到左的顺序匹配每个规则。下面的代码看起来很快，但实际上很慢。通常我们认为浏览器是这样工作的：找到唯一ID元素ul-id—>将样式应用于li元素。其实：从右往左匹配，遍历页面上每一个li元素，并确定其父元素#ul-idli{}所以你的css不要超过三层。语义BEM的关键在于名称本身就告诉其他开发人员标签的用途。通过浏览HTML代码中的class属性，您可以了解模块是如何关联的：有些只是组件，有些是这些组件的后代或元素，还有一些是组件符号的其他形式或装饰。一般命名示例：
