使CSS更容易維護及重用性更高

編寫CSS時，最常用的就是width,height,padding,border及margin，使用這幾項來構成一個box model，自然地這幾項也是我們最常修改的。所以只要適當地編寫這幾項element，將大大地改進CSS的維護性及重用性。

普遍編寫一個BOX MODEL時的寫法：

.box{ width:100px; height:100px; padding:5px }

如果需要修改padding時，將要作出以下修改：

.box{ width:98px; height:98px; padding:6px; }

對老手當然易如反掌，可是長遠來說，對維護性會有一定的影響，試想想每一個box也需要這樣修改時，將會多麼麻煩的事。

解決方法如下

<div class="box1">
    <div class="box2">box here</div>
</div>
.box1{ width:100px; height:100px; }
.box1 .box2{ padding:6px; border:5px; }

我們使用兩個box來解決問題，在外層的box設定高度闊度，及後在內層的box設定padding及border，那麼我們怎樣修改內層的padding 及 border，也不會影響到外層的height及width。

再來說說優化margin的做法。依以上例子，我們再額外再上margin

.box1{ width:100px; height:100px; margin:10px; }
.box1 .box2{ padding:6px; border:5px; }

如果我們有另外一個相同的box,可是margin卻不同，常見的做法是重新寫一個html&css或是加一個class來覆蓋，類似如下：

<div class="box1 otherMargin">
    <div class="box2">box here</div>
</div>

.box1{ width:100px; height:100px; margin:10px; }
.otherMargin{ margin:15px; }
.box1 .box2{ padding:6px; border:5px; }

這樣就會失去代碼的重用性，同時也令事情更複雜。

解決方法如下

<div class="box1 m15">
    <div class="box2">box here</div>
</div>

.m10{ margin:10px; }
.m15{ margin:15px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }

我們加入預設的margin，再應用到class裏，這樣就不影響到原本的box，又可以提高代碼的重用性。