CSS中的OOCSS編程方式是怎樣的-創(chuàng)新互聯(lián)

CSS中的OOCSS編程方式是怎樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

站在用戶的角度思考問題，與客戶深入溝通，找到拱墅網(wǎng)站設(shè)計(jì)與拱墅網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋拱墅地區(qū)。

OOCSS即面向?qū)ο蟮腃SS，這里對(duì)象指的是頁面中的元素對(duì)象，與傳統(tǒng)編程中的面向?qū)ο蟛惶嗤?，比如不存在方法這種東西，硬要說的話，附加的一些class可以看作是繼承或者接口之類的東西來實(shí)現(xiàn)對(duì)象的差異化。比如電商網(wǎng)站中的商品就是一個(gè)典型的對(duì)象，它們既有許多相同的部分，又有許多差異，寬高、按鈕、圖片、標(biāo)題等基本布局都是相同的，而邊距、線框、背景顏色、字號(hào)等都是差異化的。由此按照OOCSS的指導(dǎo)原則，我們應(yīng)該寫一個(gè)product class，然后為其添加一些border、theme之類的class來差異化它：

CSS

  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{...}

  12. .product-theme-black {

  13.     background: black;

  14.     color: white;

  15. }

  17. .product-border {

  18.     border: 1px solid #333;

  19. }

這樣在以上兩種附加class的作用下，我們?cè)趆tml中就可以獲得4種不同的product樣式，隨著附加class增加，product的樣式也會(huì)呈指數(shù)增加，千變?nèi)f化。這僅僅是一個(gè)簡單的例子，意在點(diǎn)出OOCSS的理念，但并沒有突出它的意義所在。別著急，先來看看OOCSS的兩大原則。

1. 分離容器與內(nèi)容

所謂的容器即包裹對(duì)象的元素，比如一個(gè)div，我們經(jīng)常會(huì)命名為wrap、container、body等。那么如何才算是分離容器與內(nèi)容呢？很簡單，一句話，內(nèi)容在哪都可用。也就是說不應(yīng)該出現(xiàn)這樣的情況：

CSS

  1. .container .product {

  2.     ...

  3. }

這樣干的結(jié)果就是復(fù)用性大大降低，因?yàn)橹荒茉谶@個(gè)容器內(nèi)使用它了。但這并不代表我們應(yīng)該將所需的樣式全部一股腦的扔進(jìn)單獨(dú)的class中，對(duì)于差異化應(yīng)該單獨(dú)放在一個(gè)class中，這才是OOCSS的精髓。

舉個(gè)例子，當(dāng)我們既不想犧牲太多性能，又想來個(gè)瀑布流顯擺顯擺的時(shí)候，大部分前端都會(huì)使用column，類似泳道的設(shè)計(jì)。你想說哦不，這是偽pinterest，但是誰在乎呢，用戶是不會(huì)有閑工夫拖拽瀏覽器的寬度來鑒別它的，在IE下商品多的時(shí)候至少不會(huì)太卡。哈，別較真，首先分為幾個(gè)column，然后按照高度往里填放商品，先來看看下面的代碼吧，我有省略一些樣式避免誤導(dǎo)：

CSS

  1. .column {

  2.     height: auto;

  3.     width: 200px;

  4. }

  6. .product {

  7.     width: 180px;

  8.     margin-right: 20px;

  9.     margin-bottom: 10px;

  10. }

看起來不錯(cuò)，每列200px寬，商品放入其中，水平間距要大，垂直間距要小些才像column。但是等等，我們總還是需要整齊擺放的商品列表的對(duì)不對(duì)。也許margin并不是product的必要屬性，至少它應(yīng)該是可變的。我們抽出它來：

CSS

  1. .product {

  2.     width: 180px;

  3. }

  5. .vertical-product {

  6.     height: 400px;

  7.     margin-right: 10px;

  8.     margin-bottom: 10px;

  9. }

  11. .horizontal-product {

  12.     height: auto;

  13.     margin-right: 20px;

  14.     margin-bottom: 10px;

  15. }

這樣便將column或list之類的容器與product分開來毫無關(guān)系了，即使以后出現(xiàn)了其他組織形式，只要product的基本結(jié)構(gòu)沒有變都可以直接復(fù)用，無非是添加一些附屬樣式到新的xxx-product的class中。另外這樣做還有一個(gè)好處，設(shè)計(jì)邏輯放在了HTML中，CSS更加強(qiáng)大。

什么是樣式邏輯？商品在瀑布流中不定高，在列表中定高，這就是一種樣式的邏輯，如果用父子選擇器的形式寫在CSS中，那它就失去了自由。而放在HTML通過選擇添加何種附屬class來展現(xiàn)不同形式的product，則非常的自由與靈活。另外值得一說的是，margin-bottom是一樣的，但我們應(yīng)該各自放在各自的class里面，原因很簡單，它們僅僅是一不小心恰好一樣，在設(shè)計(jì)邏輯中它們并不是一樣的bottom，這里并不是重復(fù)，而是看起來一樣。如果以后需要改變其中的一個(gè)bottom，共用則顯得非常別扭。

2. 分離皮膚與結(jié)構(gòu)

第二點(diǎn)很容易理解，皮膚（theme）就是視覺效果，即使被剔除網(wǎng)頁也沒有什么影響的就是皮膚；而結(jié)構(gòu)指地并不是像HTML這樣抽象的結(jié)構(gòu)，因?yàn)镃SS畢竟還是樣式，所以結(jié)構(gòu)只是相對(duì)的頁面結(jié)構(gòu)。

先來看看我們的product吧，添加一些背景色和邊框：

CSS

  1. .product {

  2.     width: 200px;

  3.     background: #F6F2F2;

  4.     border: 1px solid #C4A0A0;

  5. }

看起來還不錯(cuò)，不過設(shè)計(jì)師都是自大狂，精心的調(diào)色，完美的搭配，絕對(duì)不會(huì)讓你僅僅使用這么一次的，頁面的其他模塊、sidebar甚至是header都可能采用相同的背景顏色與邊框，它們甚至可能互相嵌套。好吧，這其實(shí)在設(shè)計(jì)上是為了視覺統(tǒng)一，畢竟沒有幾個(gè)設(shè)計(jì)大師能hold住3，4種以上的顏色。所以我們能做的并不是在每個(gè)class中添加這樣的樣式，而是把它提出來成為獨(dú)立的class，原因就像我開篇說的那樣，顏色為混沌之源。

CSS

  1. .main-bg {

  2.     background: #F6F2F2;

  3. }

  5. .main-border {

  6.     border: 1px solid #C4A0A0;

  7. }

這樣就可以在頁面中隨時(shí)使用主要的設(shè)計(jì)元素了，而且需要修改時(shí)也非常的簡單，不用擔(dān)心有什么地方漏掉。另外我將背景與邊框分為了兩個(gè)class，原因還是設(shè)計(jì)邏輯應(yīng)該放在HTML，背景與邊框并不是一定同時(shí)出現(xiàn)的，兩者的關(guān)系應(yīng)該由HTML決定，即使設(shè)計(jì)上邏輯決定了兩者的綁定，在實(shí)現(xiàn)時(shí)也有可能因?yàn)镠TML結(jié)構(gòu)而放在兩個(gè)不同的元素上。

OOCSS強(qiáng)調(diào)class，將每組樣式寫成一個(gè)class方便HTML中使用，眾多class組合起來能千變?nèi)f化組成一個(gè)對(duì)象。所以如果是想一勞永逸的寫一套UI作為開發(fā)時(shí)使用的樣式，我建議使用OOCSS來進(jìn)行開發(fā)。但它也有缺點(diǎn)，過多的將設(shè)計(jì)邏輯放在HTML中，極大的自由化了頁面開發(fā)時(shí)的選擇，如果寫HTML的開發(fā)者不能很好的理解整套CSS的結(jié)構(gòu)，較易在HTML中造成class混亂。


關(guān)于CSS中的OOCSS編程方式是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

本文名稱：CSS中的OOCSS編程方式是怎樣的-創(chuàng)新互聯(lián)
當(dāng)前URL：http://muchs.cn/article10/dppcgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)頁設(shè)計(jì)公司、標(biāo)簽優(yōu)化、用戶體驗(yàn)、App開發(fā)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)