3

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

例如：

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

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

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

这种情况有最佳实践吗？

4

2 回答 2

1

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

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

如果要声明通用样式，则包含通用类的类列表可能会变得太长。但它更加清晰和具体。您可以通过 javascript 对其进行管理。

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

于 2015-11-18T21:21:13.637 回答
0

你有几个选择：

  1. 预处理器 (Sass/LESS/etc) mixins + clean-css/postcss 清理器——这种方式简单而强大，但不灵活，因为它对动态登录页面、SPA 等没有用处；

  2. 外部块混合元素（BEM/runtime mixin）：class="intro__text grid__text" - 这样您只需手动拆分视觉和定位样式并将它们的类一起使用；

  3. 其他块组合：class="intro__text 段落段落--valueable" — 几乎与前面的变体一样，但没有链接到抽象网格块，这是最好和最灵活的方式（恕我直言）。

注意：您甚至可以在运行时使用修改器扩展 BEM 混合，它是非常强大的工具。

NB2：如果你不需要动态网页，你可以自由地使用 sass mixins。就我个人而言，我不使用 sass/less mixins，只使用我自己的类中使用的颜色、网格、间隙等的全局变量。

于 2015-11-19T08:14:30.227 回答