BEM 通用样式

Question

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

例如：

html

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

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

sass/css

.intro__text {

}
.profile__text {

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

如果我希望文本的样式相同，我会（假设我使用的是预处理器）将 @extend .text 放入 .intro__text 和 .profile__text classes，或者只是让整个网站的所有段落都有 class 的 text?

我觉得这两种解决方案都不太正确。

如果我有一个非常常见的样式，感觉我将在整个渲染过程中复制很多样式 css（增加文件大小）但是 class text 在我的整个标记中重复出现似乎不必要地冗长和凌乱。

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

Answer 1

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

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

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

来管理它

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

Answer 2

您有多种选择：

Preprocessor (Sass/LESS/etc) mixins + clean-css/postcss cleaner — 这种方式简单而强大，但不灵活，因为它对动态登陆页面、SPA 等没有用.;
外部块混合元素（BEM/runtime mixin）：class="intro__text grid__text" — 这样你就可以手动拆分视觉和定位样式并使用它们class在一起;
其他块混合：class="intro__text paragraph paragraph--valuable" — 几乎像以前的变体但没有链接到抽象网格块，最好和最灵活的方式（恕我直言） .

注意：即使在运行时，您也可以使用修饰符扩展 BEM 混合，它是非常强大的工具。

NB2：如果不需要动态网页，可以自由使用sassmixins。就我个人而言，我不使用 sass/less mixins，仅在我自己的 classes.

中使用颜色、网格、间隙等的全局变量

BEM Common Styles