您现在的位置是：网站首页> 编程资料编程资料

浅谈CSS中的OOCSS编程方式浅谈CSS编程的OOCSS和SMACSS设计模式

2021-09-05 837人已围观

简介 这篇文章主要介绍了CSS中的OOCSS编程方式,即CSS的面向对象编程,需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  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等。那么如何才算是分离容器与内容呢？很简单，一句话，内容在哪都可用。也就是说不应该出现这样的情况：

CSS Code复制内容到剪贴板
  1. .container .product {   
  2.     ...   
  3. }  

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

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

CSS Code复制内容到剪贴板
  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的必要属性，至少它应该是可变的。我们抽出它来：

CSS Code复制内容到剪贴板
  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. }     

这样便将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复制内容到剪贴板
  1. .product {   
  2.     width: 200px;   
  3.     background: #F6F2F2;   
  4.     border: 1px solid #C4A0A0;   
  5. }  

看起来还不错，不过设计师都是自大狂，精心的调色，完美的搭配，绝对不会让你仅仅使用这么一次的，页面的其他模块、sidebar甚至是header都可能采用相同的背景颜色与边框，它们甚至可能互相嵌套。好吧，这其实在设计上是为了视觉统一，毕竟没有几个设计大师能hold住3，4种以上的颜色。所以我们能做的并不是在每个class中添加这样的样式，而是把它提出来成为独立的class，原因就像我开篇说的那样，颜色为混沌之源。

CSS Code复制内容到剪贴板
  1. .main-bg {   
  2.     background: #F6F2F2;   
  3. }   
  4.   
  5. .main-border {   
  6.     border: 1px solid #C4A0A0;   
  7. }  

这样就可以在页面中随时使用主要的设计元素了，而且需要修改时也非常的简单，不用担心有什么地方漏掉。另外我将背景与边框分为了两个class，原因还是设计逻辑应该放在HTML，背景与边框并不是一定同时出现的，两者的关系应该由HTML决定，即使设计上逻辑决定了两者的绑定，在实现时也有可能因为HTML结构而放在两个不同的元素上。

OOCSS强调class，将每组样式写成一个class方便HTML中使用，众多class组合起来能千变万化组成一个对象。所以如果是想一劳永逸的写一套UI作为开发时使用的样式，我建议使用OOCSS来进行开发。但它也有缺点，过多的将设计逻辑放在HTML中，极大的自由化了页面开发时的选择，如果写HTML的开发者不能很好的理解整套CSS的结构，较易在HTML中造成class混乱。

上一篇：利用SVG和CSS3来实现一个炫酷的边框动画纯CSS3实现的鼠标悬停文字线条边框动画特效源码CSS3基于SVG实现的多种鼠标滑过边框线条动画特效源码CSS3实现的鼠标滑过边框线条动画特效源码纯css3实现的鼠标滑过圆形边框动画特效源码jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效源码纯css3基于svg实现鼠标经过按钮边框线条动画特效源码6种非常炫酷的CSS3按钮边框动画特效CSS3实现6种炫酷的按钮边框动画特效源码CSS3实现的图片边框动画特效源码使用纯 CSS 创作一个渐变色动画边框

下一篇：详解CSS的DRY编程方式CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网