我正在重读 smacss（CSS 的可扩展和模块化架构）[ https://smacss.com/]，大部分内容对我来说都很有意义。
主要的事情之一是模块不需要知道任何它的上下文/环境。即：它只是呈现它的内容，但并不关心它是否包含在侧边栏或主要内容区域中。到目前为止，一切都很好。
这是否会扩展到模块不应该自己定义边距但总是让他们的父母（layouts用 smacss 的说法）决定是否/如何设置它们的一般规则？
问问题
334 次
2 回答
2
我同意 Evgeniy 的观点，有时边距将是模块特定的，如果它们是强制性的，例如为了正确呈现模块的阴影样式。
但在大多数其他情况下，我会提出一个友好的分歧，并说边距 - 本质上是模块或布局边缘之间的间距 - 应该完全与布局一起存在。
SMACSS 的底线是，模块应该能够插入到任何布局容器中，并可能填充该布局的整个空间（模块上没有宽度/高度规则），并且布局边缘之间没有任何意外间距。换句话说，布局决定了子模块的尺寸和位置。
这取决于所讨论的具体问题，但例如，如果您有多个模块驻留在布局中，并且它们之间需要间距，那么布局 div/sub-divs 将需要指定那些布局子列例如，无论将哪些模块插入列中，它们都采用所需的布局间距。
最后，恐怕我也不同意子模块的建议，例如“module-name-top-gap”。这将是反 SMACSS，因为您将朝着一个方向前进，即根据特定的单个样式（例如，基本模块，除了 margin-top: 20px）来命名模块，这与内联样式相距不远。我们的想法是摆脱这种关系，并仅根据其内部构成和用途命名模块和子模块，并让布局决定其余部分。
我推荐 Jonathan Snook 关于 SMACSS 的新课程，可在 Front-end Masters 获得：https ://frontendmasters.com/courses/smacss 。我已经看完了这一切，它比他在原书中所做的详细得多，这极大地帮助了我记得我也有过这样的犹豫。
于 2015-04-10T14:28:49.760 回答
0
如果您的模块在所有情况下都需要边距，（例如，您有一些带有边框和阴影的 div 并且您必须设置边距）您可以在 module.
如果您的模块边距是可选的（它可能是页眉或页脚中的链接列表应该具有顶部或底部边距），您应该使用子类，例如<div class="my-module my-module-top-gap"> some </div>. 因此，您可以保持模块独立于上下文并修改其外观。
于 2015-03-19T12:56:04.713 回答