什么是BEM
BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护。在某种程度上,BEM和OOP是相似的。
如何命名BEM
BEM:块(block)、元素(element)、修饰符(modifier)
Block:一个独立的,可以复用而不依赖其他组件的部分,可作为一个块
Element:属于块的某部分,可作为一个元素
Modifier:用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器
下面展示一些 代码片段
。
//css为例
<p class="article">
<p class="article__body">
<p class="tag"></p>
<button class="article__button--primary"></button>
<button class="article__button--success"></button>
</p>
</p>
//less为例
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
来源
链接: https://blog.csdn.net/eunice_sytin/article/details/83341381