Question

我进行了广泛的搜索，似乎无法找到一种一致的方式，人们以模块化的方式处理模块之间的顶部/底部边距。我喜欢只使用css为.page-area { margin-bottom: 1em }的通用包装div的想法，但在现实世界中，设计师并不是那么一致，而你最终会在该容器上有多种变体。我已经在一些项目中使用了这个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似乎没有触及它。

Answer 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

指南针也有vertical rhythm的一些预设。

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

1 个答案: