建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

浅谈CSS中的OOCSS编程方式

更新时间:2016-12-29整理编辑:建站学习网阅读:0

   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: 1px solid #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: 1px solid #C4A0A0;

  }

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

  CSS Code复制内容到剪贴板

  .main-bg {

  background: #F6F2F2;

  }

  .main-border {

  border: 1px solid #C4A0A0;

  }

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

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

本文网址:https://www.dedexuexi.com/divcss/jc/1608.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
CSS中图片于文本的基线对齐设置
« 上一篇2016年12月27日
Iframe 用法浅析
2016年12月27日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content