在整个网站中定义一般非块特定样式的最佳方法是什么？
例如：
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类似乎不必要的冗长和不整洁。
这种情况是否有最佳做法？
答案 0 :(得分：1)
我不能说有最好的方法。这取决于项目的结构以及您喜欢的样式。这两种方法主要用于代码。
如果您想通过css文件管理样式 - 请写@extend。但是，如果您想要一个没有共同风格的元素，您必须为el创建一个修饰符。例如 - .profile__text--reset。
如果要声明常用样式，则具有公共类的类列表可能会变得太长。但它更清晰，更具体。你有可能通过javascript管理它。
此代码的一个改进是使用带修饰符的帮助程序会更好。例如，使用.text或.text--sm代替简单.text--m-sm。或者，如果您只想要保证金 - .m-sm。但这取决于你。
答案 1 :(得分：0)
您有几种选择：
预处理器（Sass / LESS / etc）mixins + clean-css / postcss cleaner - 这种方式简单而强大，但不灵活，因为它对动态登陆页面，SPA等无用;
外部块混合的元素（BEM /运行时mixin）：class =“intro__text grid__text” - 这样你只需手动分割视觉和定位样式并一起使用它们的类;
其他区块组合：class =“intro__text段落段落 - 有价值” - 几乎与之前的变体相似，但没有链接到抽象网格块，最好也是最灵活的方式（恕我直言）。
注意：即使在运行时，你也可以使用修饰符扩展BEM混音，这是非常强大的工具。
NB2：如果您不需要动态网页，可以自由使用sass mixins。就个人而言，我不使用sass / less mixins，只使用我自己的类中使用的颜色，网格，间隙等全局变量。