CSS的少继承和多用途组合

下面是一个通用代码：
Css：
复制代码代码如下所示：
箱{。
边境：1px solid # CCC；
字体大小：12px；
背景：# f1f1f1；
填料：10px；
}

HTML：
复制代码代码如下所示：
这是一个灰色的盒子。

但此时需求正在增加。在页面中，我们不仅需要一个灰色的盒子，而且需要一个蓝色的盒子，也许是绿色的。通常我们会说，如果我们使用集成，我们将做以下更改。
Css：
复制代码代码如下所示：
灰色盒子，
框绿色{
边境：1px solid # CCC；
字体大小：12px；
填料：10px；
}
。盒灰{背景：# f1f1f1 }
。箱绿色{背景：# 66ff66 }

Html：
复制代码代码如下所示：
这是一个灰色的盒子。
这是一个绿色的盒子。

但这个时候的需求和变化，和不同的应用程序的根，一些盒子，用12个词来使用，有14字，有些人想改变一些10px估计20px，这时候你就头大，如果你想用传统的CSS代码变得非常复杂，我们必须尝试利用组合方式无法解决。
Css：
复制代码代码如下所示：
。fs-12 {字体大小：12px }
字体大小：14px。FS-14 { }
填料：10px PD-10 { }。
pd-20 {填充：20px }。

箱{。
边境：1px solid # CCC；
}
。箱。灰色{背景：# f1f1f1 }
。箱。绿色{背景：# 66ff66 }

HTML
复制代码代码如下所示：
这一灰色fontsize12px padding20px盒
这一灰色fontsize14px padding10px盒

的…
我们看到一些类的引用，但代码和逻辑都很清晰，很容易维护，随机扩展的随机组合。从以上我们可以看到的组合方式是不言而喻的，但它并不是十全十美的，然后当拆分组合不能过多，否则效果可能适得其反，只有对继承+恰到好处地使我们的代码更加优雅和艺术的结合。