今天小编跟大家讲解下有关浅谈CSS中的OOCSS编程方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈CSS中的OOCSS编程方式 的相关资料，希望小伙伴们看了有所帮助。
OOCSS即面向对象的CSS 这里对象指的是页面中的元素对象 与传统编程中的面向对象不太相同 比如不存在方法这种东西 硬要说的话 附加的一些class可以看作是继承或者接口之类的东西来实现对象的差异化。比如电商网站中的商品就是一个典型的对象 它们既有许多相同的部分 又有许多差异 宽高、按钮、图片、标题等基本布局都是相同的 而边距、线框、背景颜色、字号等都是差异化的。由此按照OOCSS的指导原则 我们应该写一个product class 然后为其添加一些border、theme之类的class来差异化它：
CSS Code复制内容到剪贴板 .product{ display:block; overflow:hidden; float:left; width:200px; height:auto; } .product-head{...} .product-body{...} .product-foot{...} .product-theme-black{ background:black; color:white; } .product-border{ border:1pxsolid#333; }这样在以上两种附加class的作用下 我们在html中就可以获得4种不同的product样式 随着附加class增加 product的样式也会呈指数增加 千变万化。这仅仅是一个简单的例子 意在点出OOCSS的理念 但并没有突出它的意义所在。别着急 先来看看OOCSS的两大原则。
1. 分离容器与内容
所谓的容器即包裹对象的元素 比如一个div 我们经常会命名为wrap、container、body等。那么如何才算是分离容器与内容呢 很简单 一句话 内容在哪都可用。也就是说不应该出现这样的情况：
CSS Code复制内容到剪贴板 .container.product{ ... }这样干的结果就是复用性大大降低 因为只能在这个容器内使用它了。但这并不代表我们应该将所需的样式全部一股脑的扔进单独的class中 对于差异化应该单独放在一个class中 这才是OOCSS的精髓。
举个例子 当我们既不想牺牲太多性能 又想来个瀑布流显摆显摆的时候 大部分前端都会使用column 类似泳道的设计。你想说哦不 这是伪pinterest 但是谁在乎呢 用户是不会有闲工夫拖拽浏览器的宽度来鉴别它的 在IE下商品多的时候至少不会太卡。哈 别较真 首先分为几个column 然后按照高度往里填放商品 先来看看下面的代码吧 我有省略一些样式避免误导：
CSS Code复制内容到剪贴板 .column{ height:auto; width:200px; } .product{ width:180px; margin-right:20px; margin-bottom:10px; }看起来不错 每列200px宽 商品放入其中 水平间距要大 垂直间距要小些才像column。但是等等 我们总还是需要整齐摆放的商品列表的对不对。也许margin并不是product的必要属性 至少它应该是可变的。我们抽出它来：
CSS Code复制内容到剪贴板 .product{ width:180px; } .vertical-product{ height:400px; margin-right:10px; margin-bottom:10px; } .horizontal-product{ height:auto; margin-right:20px; margin-bottom:10px; }这样便将column或list之类的容器与product分开来毫无关系了 即使以后出现了其他组织形式 只要product的基本结构没有变都可以直接复用 无非是添加一些附属样式到新的xxx-product的class中。另外这样做还有一个好处 设计逻辑放在了HTML中 CSS更加强大。
什么是样式逻辑 商品在瀑布流中不定高 在列表中定高 这就是一种样式的逻辑 如果用父子选择器的形式写在CSS中 那它就失去了自由。而放在HTML通过选择添加何种附属class来展现不同形式的product 则非常的自由与灵活。另外值得一说的是 margin-bottom是一样的 但我们应该各自放在各自的class里面 原因很简单 它们仅仅是一不小心恰好一样 在设计逻辑中它们并不是一样的bottom 这里并不是重复 而是看起来一样。如果以后需要改变其中的一个bottom 共用则显得非常别扭。
2. 分离皮肤与结构
第二点很容易理解 皮肤（theme）就是视觉效果 即使被剔除网页也没有什么影响的就是皮肤；而结构指地并不是像HTML这样抽象的结构 因为CSS毕竟还是样式 所以结构只是相对的页面结构。
先来看看我们的product吧 添加一些背景色和边框：
CSS Code复制内容到剪贴板 .product{ width:200px; background:#F6F2F2; border:1pxsolid#C4A0A0; }看起来还不错 不过设计师都是自大狂 精心的调色 完美的搭配 绝对不会让你仅仅使用这么一次的 页面的其他模块、sidebar甚至是header都可能采用相同的背景颜色与边框 它们甚至可能互相嵌套。好吧 这其实在设计上是为了视觉统一 毕竟没有几个设计大师能hold住3 4种以上的颜色。所以我们能做的并不是在每个class中添加这样的样式 而是把它提出来成为独立的class 原因就像我开篇说的那样 颜色为混沌之源。
CSS Code复制内容到剪贴板 .main-bg{ background:#F6F2F2; } .main-border{ border:1pxsolid#C4A0A0; }这样就可以在页面中随时使用主要的设计元素了 而且需要修改时也非常的简单 不用担心有什么地方漏掉。另外我将背景与边框分为了两个class 原因还是设计逻辑应该放在HTML 背景与边框并不是一定同时出现的 两者的关系应该由HTML决定 即使设计上逻辑决定了两者的绑定 在实现时也有可能因为HTML结构而放在两个不同的元素上。
OOCSS强调class 将每组样式写成一个class方便HTML中使用 众多class组合起来能千变万化组成一个对象。所以如果是想一劳永逸的写一套UI作为开发时使用的样式 我建议使用OOCSS来进行开发。但它也有缺点 过多的将设计逻辑放在HTML中 极大的自由化了页面开发时的选择 如果写HTML的开发者不能很好的理解整套CSS的结构 较易在HTML中造成class混乱。
来源：爱蒂网
