在整个站点中定义通用非 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
重复了所有在我的整个标记中,似乎不必要地冗长和凌乱。
是否有针对这种情况的最佳实践?
最佳答案
我不能说有最好的方法。这取决于您的元素结构和您喜欢的风格。这两种方法主要用于代码中。
如果您喜欢通过 css 文件管理样式 - 请编写 @extend
。但是,如果您想要一个没有通用样式的元素,则必须为 el 创建一个修饰符。例如 - .profile__text--reset
。
如果你想声明通用样式,你的通用类列表可能会变得太长。但它更明确和具体。您可以通过 javascript 管理它。
此代码的一个改进是更好地使用带有修饰符的助手。例如,不要使用简单的 .text
,而是使用 .text--sm
或 .text--m-sm
。或者,如果您只想要 margin - .m-sm
。但这取决于您。
关于css - BEM 通用样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33790067/