css - BEM 通用样式

Question

在整个站点中定义通用非 block 特定样式的最佳方法是什么？

例如:

html

<div class="intro">
    <p class="intro__text">foo</p>
</div>

<div class="profile">
    <p class="profile__text">bar</p>
</div>

萨斯/CSS

.intro__text {

}
.profile__text {

}
.text {
    margin-bottom: 0.5em;
}

如果我希望文本的样式相同，我是否(假设我使用的是预处理器)@extend .text 到 .intro__text 和 .profile__text 类，或者只是让整个网站的所有段落都有一个 text 类？

这两种解决方案对我来说似乎都有些不正确。

如果我有一个非常常见的样式，感觉就像我要在我渲染的 css 中复制很多样式(增加文件大小)但是有一类 text 重复了所有在我的整个标记中，似乎不必要地冗长和凌乱。

是否有针对这种情况的最佳实践？

Answer 1

我不能说有最好的方法。这取决于您的元素结构和您喜欢的风格。这两种方法主要用于代码中。

如果您喜欢通过 css 文件管理样式 - 请编写 @extend。但是，如果您想要一个没有通用样式的元素，则必须为 el 创建一个修饰符。例如 - .profile__text--reset。

如果你想声明通用样式，你的通用类列表可能会变得太长。但它更明确和具体。您可以通过 javascript 管理它。

此代码的一个改进是更好地使用带有修饰符的助手。例如，不要使用简单的 .text，而是使用 .text--sm 或 .text--m-sm。或者，如果您只想要 margin - .m-sm。但这取决于您。