Scalable/Modular CSS：如何處理模塊之間的垂直邊距？

我已經廣泛搜索，似乎無法找到一種一致的方式，人們以模塊化的方式處理模塊之間的頂部/底部邊距。我喜歡只使用通用的包裝div的想法，如.page-area { margin-bottom: 1em }，但在現實世界中，設計師並不一致，並且最終會在該容器上出現多種變體。我用這個SASS代碼的幾個項目，好嗎工作，但我並不一定喜歡它（信貸尼科爾Sullivan）：Scalable/Modular CSS：如何處理模塊之間的垂直邊距？

*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似乎沒有觸及它。

來源

2014-11-13 Ivan Durst

因此，SO並不適合自以爲是的「最佳實踐」類型問題。 – cimmanon

@cimmanon：關於SO的大多數問題都是'自以爲是的'最佳實踐''問題 - 投票系統讓我們決定哪一個是最佳解決方案，從而加強了所有查看它的開發人員的技能和信心。我已經無休止地搜索和搜索了，並且找不到這個問題的答案，所以我覺得問這個問題是適當的。我沒有要求提供良好實踐的清單或討論，我要求提供一個*最佳*實踐，希望能夠指出具有*最常用答案的資源（如果有的話），這將是通過投票確認。 –

我不知道這是否是對你有所幫助，但是這通常是我做什麼。

我設置一個垂直的節奏變量根據我的默認值，然後進行垂直節奏的佔位符類，這是我在需要它的元素擴展。

$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預置。

來源

2014-11-13 21:09:27 faustman

Scalable/Modular CSS：如何處理模塊之間的垂直邊距？

回答

相關問題