浅谈CSS中的OOCSS程序编写方法

2020-10-19 10:25 jianzhan

OOCSS即朝向目标的CSS,这里目标指的是网页页面中的元素目标,与传统式程序编写中的朝向目标不太同样,例如不存在方式这类物品,硬要说的话,额外的1些class能够看做是承继或插口之类的物品来完成目标的差别化。例如电子商务网站中的产品便是1个典型的目标,它们既有很多同样的一部分,又有很多差别,宽高、按钮、照片、题目等基础合理布局全是同样的,而边距、线框、情况色调、字号等全是差别化的。由此依照OOCSS的具体指导标准,大家应当写1个product class,随后为其加上1些border、theme之类的class来差别化它:

CSS Code拷贝內容到剪贴板
  1. .product {   
  2.     displayblock;   
  3.     overflowhidden;   
  4.     floatleft;   
  5.     width200px;   
  6.     heightauto;   
  7. }   
  8. .product-head{...}   
  9. .product-body{...}   
  10. .product-foot{...}   
  11.   
  12. .product-theme-black {   
  13.     backgroundblack;   
  14.     colorwhite;   
  15. }   
  16.   
  17. .product-border {   
  18.     border1px solid #333;   
  19. }  

这样在以上两种额外class的功效下,大家在html中便可以得到4种不一样的product款式,伴随着额外class提升,product的款式也会呈指数值提升,千姿百态。这仅仅是1个简易的事例,意在点出OOCSS的理念,但并沒有突显它的实际意义所属。别心急,先看来看OOCSS的两大标准。

1. 分离出来器皿与內容

所谓的器皿即包裹目标的元素,例如1个div,大家常常会取名为wrap、container、body等。那末怎样才算是分离出来器皿与內容呢?很简易,1句话,內容在哪儿都可以用。也便是说不可该出現这样的状况:

CSS Code拷贝內容到剪贴板
  1. .container .product {   
  2.     ...   
  3. }  

这样干的結果便是复用性大大减少,由于只能在这个器皿内应用它了。但这其实不意味着大家应当将所需的款式所有1股脑的扔进独立的class中,针对差别化应当独立放在1个class中,这才是OOCSS的精粹。

举个事例,当大家既不想放弃太多特性,又想来个瀑布流炫耀炫耀的情况下,绝大多数前端开发都会应用column,相近泳道的设计方案。你想说哦不,这是伪pinterest,可是谁在意呢,客户是不容易有闲时间拖拽访问器的宽度来辨别它的,在IE下产品多的情况下最少不容易太卡。哈,别叫真,最先分成几个column,随后依照高宽比往里填放产品,先看来看下面的编码吧,我有省略1些款式防止误导:

CSS Code拷贝內容到剪贴板
  1. .column {   
  2.     heightauto;   
  3.     width200px;   
  4. }   
  5.   
  6. .product {   
  7.     width180px;   
  8.     margin-right20px;   
  9.     margin-bottom10px;   
  10. }  

看起来非常好,每列200px宽,产品放入在其中,水平间隔要大,竖直间隔要小些才像column。可是这些,大家总還是必须齐整放置的产品目录的对不对。或许margin其实不是product的必要特性,最少它应当是可变的。大家抽出它来:

CSS Code拷贝內容到剪贴板
  1. .product {   
  2.     width180px;   
  3. }   
  4.   
  5. .vertical-product {   
  6.     height400px;   
  7.     margin-right10px;   
  8.     margin-bottom10px;   
  9. }   
  10.   
  11. .horizontal-product {   
  12.     heightauto;   
  13.     margin-right20px;   
  14.     margin-bottom10px;   
  15. }     

这样便将column或list之类的器皿与product分起来没什么关联了,即便之后出現了别的机构方式,要是product的基础构造沒有变都可以以立即复用,不过是加上1些附设款式到新的xxx-product的class中。此外这样做也有1个益处,设计方案逻辑性放在了HTML中,CSS更为强劲。

甚么是款式逻辑性?产品在瀑布流中不确定高,在目录中定高,这便是1种款式的逻辑性,假如用父子挑选器的方式写在CSS中,那它就丧失了随意。而放在HTML根据挑选加上何种附设class来呈现不一样方式的product,则十分的随意与灵便。此外值得1说的是,margin-bottom是1样的,但大家应当各有放在各有的class里边,缘故很简易,它们仅仅是1一不小心正好1样,在设计方案逻辑性中它们其实不是1样的bottom,这里其实不是反复,而是看起来1样。假如之后必须更改在其中的1个bottom,同用则显得十分别扭。

2. 分离出来皮肤与构造

第2点很非常容易了解,皮肤(theme)便是视觉效果实际效果,即便被剔除网页页面也沒有甚么危害的便是皮肤;而构造指地其实不是像HTML这样抽象性的构造,由于CSS终究還是款式,因此构造只是相对性的网页页面构造。

先看来看大家的product吧,加上1些情况色和边框:

CSS Code拷贝內容到剪贴板
  1. .product {   
  2.     width200px;   
  3.     background#F6F2F2;   
  4.     border1px solid #C4A0A0;   
  5. }  

看起来还非常好,但是设计方案师全是自傲狂,用心的调色,完善的配搭,肯定不容易让你仅仅应用这么1次的,网页页面的别的控制模块、sidebar乃至是header都可以能选用同样的情况色调与边框,它们乃至将会相互之间嵌套循环。好吧,这实际上在设计方案上是以便视觉效果统1,终究沒有几个设计方案高手能hold住3,4种以上的色调。因此大家能做的其实不是在每一个class中加上这样的款式,而是把它提出来变成单独的class,缘故就像我开篇说的那样,色调为浑沌之源。

CSS Code拷贝內容到剪贴板
  1. .main-bg {   
  2.     background#F6F2F2;   
  3. }   
  4.   
  5. .main-border {   
  6.     border1px solid #C4A0A0;   
  7. }  

这样便可以在网页页面中随时应用关键的设计方案元素了,并且必须改动时也十分的简易,无需担忧有甚么地区漏掉。此外我将情况与边框分成了两个class,缘故還是设计方案逻辑性应当放在HTML,情况与边框其实不是1定另外出現的,二者的关联应当由HTML决策,即便设计方案上逻辑性决策了二者的关联,在完成时也是有将会由于HTML构造而放在两个不一样的元素上。

OOCSS强调class,将每组款式写成1个class便捷HTML中应用,诸多class组成起来能千姿百态构成1个目标。因此假如是想1劳永逸的写1套UI做为开发设计时应用的款式,我提议应用OOCSS来开展开发设计。但它也是有缺陷,过量的将设计方案逻辑性放在HTML中,巨大的随意化了网页页面开发设计时的挑选,假如写HTML的开发设计者不可以很好的了解整套CSS的构造,较易在HTML中导致class错乱。