可扩展/模块化 CSS：如何处理模块之间的垂直边距？

Posted 2023-02-18

【中文标题】可扩展/模块化 CSS：如何处理模块之间的垂直边距？

【英文标题】：Scalable/Modular CSS: how to handle vertical margins between modules?

【发布时间】：2015-01-11 02:47:23

【问题描述】：

我进行了广泛的搜索，但似乎无法找到一种一致的方式来让人们以...模块化方式处理模块之间的顶部/底部边距。我喜欢只使用通用包装器 div 并将 css 设置为.page-area margin-bottom: 1em 的想法，但在现实世界中，设计师并没有那么一致，并且您最终会在该容器上获得多种变体。我在几个项目中使用了这个 sass 代码，它运行良好，但我不一定喜欢它（感谢 Nicole Sullivan）：

*p,m = padding,margin
*a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
*s,m,l,n = small($space-half),medium($space),large($space-double),none(0)

*/

$space : 1em;
$space-half : $space/2;
$space-double : $space*2;

 .ptn, .pvn, .pan  padding-top:     0; 
 .pts, .pvs, .pas  padding-top:     $space-half; 
 .ptm, .pvm, .pam  padding-top:     $space; 
 .ptl, .pvl, .pal  padding-top:     $space-double; 
 .prn, .phn, .pan  padding-right:   0; 
 .prs, .phs, .pas  padding-right:   $space-half; 
 .prm, .phm, .pam  padding-right:   $space; 
 .prl, .phl, .pal  padding-right:   $space-double; 
 .pbn, .pvn, .pan  padding-bottom:  0; 
 .pbs, .pvs, .pas  padding-bottom:  $space-half; 
 .pbm, .pvm, .pam  padding-bottom:  $space; 
 .pbl, .pvl, .pal  padding-bottom:  $space-double; 
 .pln, .phn, .pan  padding-left:    0; 
 .pls, .phs, .pas  padding-left:    $space-half; 
 .plm, .phm, .pam  padding-left:    $space; 
 .pll, .phl, .pal  padding-left:    $space-double; 
 .mtn, .mvn, .man  margin-top:      0; 
 .mts, .mvs, .mas  margin-top:      $space-half; 
 .mtm, .mvm, .mam  margin-top:      $space; 
 .mtl, .mvl, .mal  margin-top:      $space-double; 
 .mrn, .mhn, .man  margin-right:    0; 
 .mrs, .mhs, .mas  margin-right:    $space-half; 
 .mrm, .mhm, .mam  margin-right:    $space; 
 .mrl, .mhl, .mal  margin-right:    $space-double; 
 .mbn, .mvn, .man  margin-bottom:   0; 
 .mbs, .mvs, .mas  margin-bottom:   $space-half; 
 .mbm, .mvm, .mam  margin-bottom:   $space; 
 .mbl, .mvl, .mal  margin-bottom:   $space-double; 
 .mln, .mhn, .man  margin-left:     0; 
 .mls, .mhs, .mas  margin-left:     $space-half; 
 .mlm, .mhm, .mam  margin-left:     $space; 
 .mll, .mhl, .mal  margin-left:     $space-double; 

我意识到像这样的问题可能会引发讨论，但这不是我的意图 - 我只是想知道是否有一个单一的通用最佳实践来保持模块和页面的一致垂直边距/填充部分？ SMACSS 似乎没有涉及到它。

【问题讨论】：

SO 不适合解决固执己见的“最佳实践”类型的问题。

@cimmanon：关于 SO 的大多数问题都是“自以为是的“最佳实践”问题——投票系统让我们决定哪个是最佳解决方案，这增强了所有查看它的开发人员的技能和信心.我已经无休止地用谷歌搜索和搜索，找不到这个问题的答案，所以我觉得问这个问题是合适的。我没有要求列出或讨论好的做法，我要求的是单一的最佳做法，希望得到指向具有最常用答案的资源（如果有的话），这将通过投票来确认。

【参考方案1】：

我不知道这是否对你有帮助，但这通常是我所做的。

我根据我的默认设置了一个垂直节奏变量，然后为垂直节奏创建了一个占位符类，我在需要它的元素上扩展了它。

$base-font-size: 20px !default
$base-line-height: 1.3
$base-vertical-rhythm: ceil($base-font-size * $base-line-height)

%base-vertical-rhythm
    margin-bottom: em($base-vertical-rhythm)

blockquote,
dl,
ol,
p,
ul
    @extend %base-vertical-rhythm

Compass 还有一些vertical rhythm 的预设。