BEM(块-元素-修饰符)是一种命名约定,用于在编写CSS时组织代码和避免样式冲突。BEM本身并不禁止使用重置/默认规则,但它鼓励使用一种更结构化的方法来处理这些规则。
下面是一个示例解决方法,展示如何在BEM中处理重置/默认规则:
HTML结构:
Title
Text
CSS样式:
.block {
/* 添加重置/默认样式 */
margin: 0;
padding: 0;
}
.block__title {
/* 添加重置/默认样式 */
font-size: 16px;
font-weight: bold;
}
.block__text {
/* 添加重置/默认样式 */
line-height: 1.5;
}
在这个示例中,我们将重置/默认样式添加到BEM命名约定中。通过在块级元素(例如block
)上添加重置/默认样式,我们确保在整个块中的所有元素都继承这些样式。
同样,在元素级别(例如block__title
和block__text
)添加重置/默认样式,以确保它们在块内部具有相同的样式。
需要注意的是,重置/默认样式应该在BEM命名约定中的"块"级别或"元素"级别进行添加,而不是在"修饰符"级别。这样可以确保修饰符可以独立于默认样式进行样式设置。
总结起来,BEM并不禁止使用重置/默认规则,但它鼓励使用一种更结构化的方法来处理这些规则,以确保样式的一致性和可维护性。
下一篇:BEM中的继承问题