BEM(Block Element Modifier)是一种CSS命名约定,用于在HTML和CSS之间建立关联。在BEM中,每个元素都有一个块(Block)和一个或多个修饰符(Modifier)。当涉及到多个复杂的修饰符时,可以采用以下约定:
以下是一个示例代码,展示了如何应用BEM命名约定来处理多个复杂修饰符的情况:
HTML:
CSS:
.block {
/* 块的样式 */
}
.block__element {
/* 元素的基础样式 */
}
.block__element--modifier1 {
/* 修饰符1的样式 */
}
.block__element--modifier2 {
/* 修饰符2的样式 */
}
在上面的示例中,块的基础类为block
,元素的基础类为block__element
。修饰符1的类名为block__element--modifier1
,修饰符2的类名为block__element--modifier2
。这样可以清晰地区分不同的修饰符,并保持代码的可读性和一致性。
通过以上约定,可以有效地管理多个复杂修饰符,并确保代码的可维护性和可扩展性。
上一篇:BEM块的HTML标记