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类中，还是只让整个站点的所有段落都有一个text类。

在我看来，这两种解决方案似乎都有点不正确。

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

在这种情况下有最佳做法吗？

Answer 1

我不能说这是最好的方法。这取决于你的项目的结构和你喜欢什么风格。这两种方法大多在代码中使用。

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

如果要声明公共样式，则具有公共类的类列表可能会变得太长。但它更加明确和具体。你有可能通过javascript来管理它。

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

Answer 2

你有几种选择：

1. 预处理器(Sass/LESS/etc)混合+清洁-css/postcss清洁-这种方式是简单和强大的，但不灵活，因为它不适用于动态登陆页，SPA等；
2. 外部块混合元素(边界元/运行时混合)：class="intro__text grid__text“--通过这种方式，您只需手动分割可视化和定位样式，并将它们的类一起使用；
3. 其他块组合: class="intro__text段落段--很有价值“--几乎和以前的版本一样，但没有链接到抽象的网格块，是最好和最灵活的方法(IMHO)。

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

NB2:如果你不需要动态网页，你可以自由使用sass混合器。就我个人而言，我不使用sass/更少的混合，只使用全局变量的颜色，网格，间隙等在我自己的类中使用。