Scalable/Modular CSS: how to handle vertical margins between modules? - css

Question

I've searched extensively, and can't seem to find a consistent way that people handle the top/bottom margins between modules in a... modular way. I like the idea of just using a generic wrapper div with the css as .page-area { margin-bottom: 1em }, but in the real world, designers aren't that consistent, and you end up with multiple variations on that container. I've used this sass code on a few projects, and it worked alright, but I didn't necessarily love it (credit to 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; }
I realize that questions like this can potentially start discussions, but that's not my intent - I'm just wondering if there is a single common best practice for consistent vertical margin/padding of modules and page sections? SMACSS doesn't seem to touch on it.

Answer 1

I don't know if this will be helpful for you, but this is usually what I do.
I set a vertical rhythm variable based on my defaults, and then make a placeholder class for vertical rhythm, which I extend on elements that need it.
$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 also has some presets for vertical rhythm.