浅谈CSS中的OOCSS编程方式

OOCSS即面向对象的CSS，这里对象指的是页面中的元素对象，与传统编程中的面向对象不太相同，比如不存在方法这种东西，硬要说的话，附加的一些class可以看作是继承或者接口之类的东西来实现对象的差异化。比如电商网站中的商品就是一个典型的对象，它们既有许多相同的部分，又有许多差异，宽高、按钮、图片、标题等基本布局都是相同的，而边距、线框、背景颜色、字号等都是差异化的。由此按照OOCSS的指导原则，我们应该写一个product class，然后为其添加一些border、theme之类的class来差异化它：

1. .product {   
2.     display: block;   
3.     overflow: hidden;   
4.     float: left;   
5.     width: 200px;   
6.     height: auto;   
7. }   
8. .product-head{...}   
9. .product-body{...}   
10. .product-foot{...}   
11.   
12. .product-theme-black {   
13.     background: black;   
14.     color: white;   
15. }   
16.   
17. .product-border {   
18.     border: 1px solid #333;   
19. }  

这样在以上两种附加class的作用下，我们在html中就可以获得4种不同的product样式，随着附加class增加，product的样式也会呈指数增加，千变万化。这仅仅是一个简单的例子，意在点出OOCSS的理念，但并没有突出它的意义所在。别着急，先来看看OOCSS的两大原则。

1. 分离容器与内容

所谓的容器即包裹对象的元素，比如一个div，我们经常会命名为wrap、container、body等。那么如何才算是分离容器与内容呢？很简单，一句话，内容在哪都可用。也就是说不应该出现这样的情况：

1. .container .product {   
2.     ...   
3. }  

这样干的结果就是复用性大大降低，因为只能在这个容器内使用它了。但这并不代表我们应该将所需的样式全部一股脑的扔进单独的class中，对于差异化应该单独放在一个class中，这才是OOCSS的精髓。

举个例子，当我们既不想牺牲太多性能，又想来个瀑布流显摆显摆的时候，大部分前端都会使用column，类似泳道的设计。你想说哦不，这是伪pinterest，但是谁在乎呢，用户是不会有闲工夫拖拽浏览器的宽度来鉴别它的，在IE下商品多的时候至少不会太卡。哈，别较真，首先分为几个column，然后按照高度往里填放商品，先来看看下面的代码吧，我有省略一些样式避免误导：

1. .column {   
2.     height: auto;   
3.     width: 200px;   
4. }   
5.   
6. .product {   
7.     width: 180px;   
8.     margin-right: 20px;   
9.     margin-bottom: 10px;   
10. }  

看起来不错，每列200px宽，商品放入其中，水平间距要大，垂直间距要小些才像column。但是等等，我们总还是需要整齐摆放的商品列表的对不对。也许margin并不是product的必要属性，至少它应该是可变的。我们抽出它来：

1. .product {   
2.     width: 180px;   
3. }   
4.   
5. .vertical-product {   
6.     height: 400px;   
7.     margin-right: 10px;   
8.     margin-bottom: 10px;   
9. }   
10.   
11. .horizontal-product {   
12.     height: auto;   
13.     margin-right: 20px;   
14.     margin-bottom: 10px;   
15. }