使用smacss是否建议模块不要设置页边距，而是让布局/容器来处理？

Question

我正在重读smacss (可扩展和模块化的CSS体系结构)[https://smacss.com/]，大部分内容对我来说都是有意义的。

主要的事情之一是模块不需要了解它的上下文/环境。即:它只是呈现它的内容，但不关心它是否包含在一个侧栏或主要内容区域。到目前一切尚好。

这是否延伸到这样的一般规则:模块永远不应该自己定义边距，而总是让他们的父母(在smacss术语中是layouts )决定是否/如何设置它们？

Answer 1

我同意Evgeniy的观点，因为为了正确地呈现模块的阴影样式，有时如果它们是强制的，那么边距就会是特定的。

但是，在大多数其他情况下，我会提出友好的不同意见，并说边际--基本上是模块或布局边之间的间隔--应该完全由布局来决定。

SMACSS的底线是，模块应该能够插入到任何布局容器中，并可能填充布局的整个空间(模块上没有宽度/高度规则)，并且布局边缘之间没有任何意外的间隔。换句话说，布局决定子模块的尺寸和位置。

这取决于具体的问题，但是如果您有多个模块驻留在一个布局中，并且它们之间需要间隔，那么布局div/sub就需要指定那些布局子列，这样无论哪些模块插入到列中，它们都采用所需的间隔间隔布局。

最后，我恐怕也不同意子模块的建议，例如“模块名称-顶层差距”。这将是反SMACSS，因为您将朝着一个方向，您是根据特定的个别样式命名模块(例如，基模块，除了边距顶部:20‘t)，这是离内联样式不远的。这样做的目的是摆脱这种关系，只根据它们的内部构成和目的来命名模块和子模块，然后由布局来决定其余的模块。

我推荐Jonathan关于SMACSS的新课程，可以在前端大师：https://frontendmasters.com/courses/smacss上找到。我看过这一切，比他在原著中的细节要详细得多，这对我还记得的这些犹豫有很大的帮助。

Answer 2

如果您的模块在所有情况下都需要边距(例如，您有一些带边框和阴影的div，并且必须设置边距)，则可以在模块中设置它。

如果您的模块边距是可选的(可能是页眉或页脚中的链接列表，应该有顶部或底部边距)，您应该使用子类，比如<div class="my-module my-module-top-gap"> some </div>。因此，您可以保持模块独立于上下文并修改其外观。