(二十)BEM命名规范
1:基本概念
BEM 命名规范
Block - 更高级别的抽象或组件
Element - Block 的后代
Modifier - 不同状态
命名方法
.block__element--modifier {
display: flex;
}
.block--modifier {
display: flex;
}
.block__element {
display: flex;
}
<p class="header">
<p class="header__body">
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
2:Block
/* correct */
.header {
}
/* wrong */
.header--select {
}
/* correct */
.header {
}
/* wrong */
.header {
margin-top: 50px;
}
/* correct */
.header {
}
/* wrong */
.header a {
margin-top: 50px;
}