Scalable/Modular CSS : 모듈 간의 수직 마진을 처리하는 방법은 무엇입니까?

Question

저는 광범위하게 검색 한 결과 사람들이 모듈 간의 상/하 여백을 모듈 방식으로 처리한다는 일관된 방식을 찾을 수 없습니다. CSS를 사용하여 일반 래퍼 div를 사용하는 아이디어가 마음에 들지만 현실 세계에서는 디자이너가 일관성이 없으며 여러 가지 변형으로 끝납니다. 나는 몇 가지 프로젝트에 말대꾸 코드를 사용했습니다, 그리고 그것은 확실히했다, 그러나 나는 반드시 (니콜 설리반 신용) 사랑하지 않았다

*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에 대한 몇 가지 사전 설정도 있습니다.