OOCSS

參考：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss? ? 作者：Louis Lazaris

oocss是Nicole Sullivan在Web Directions North中第一次提出，它代表了一種快、可維護、基于標準的CSS寫法。

全稱object-oriented-css,面向?qū)ο蟮腃SS。既然是面向?qū)ο?#xff0c;那什么是OOCSS中的對象呢？OOCSS中所說的對象是一種可復(fù)用的視覺模型。OOCSS講究復(fù)用，并快速高效的書寫樣式，且在日后便于修改、添加和維護。

?

OOCSS基本原則

1.結(jié)構(gòu)與樣式分離

代碼示例：

使用OOCSS前：

#button {width: 200px;height: 50px;padding: 10px;border: 1px solid #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}#box {width: 400px;overflow: hidden;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}

?

?

使用OOCSS后：

.button {width: 200px;height: 50px;}.box {width: 400px;overflow: hidden;}.skin {border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}

?

?

前一種普通的CSS，用了id選擇器，并且所有特性都獨立存在每個元素中。后一種使用了OOCSS，通過class選擇器，并且把公共的樣式提取到一個名為skin的class中，復(fù)用到每個元素上。顯而易見，代碼量減小了，達到了重用的效果，如果需要修改box和button在頁面中的表現(xiàn)，也只需要維護skin中的樣式代碼。代價僅僅多了一個class。

?

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

示例代碼：

#sidebar h3 {font-family: Arial, Helvetica, sans-serif;font-size: 2em;line-height: 1;color: #777;text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}/* other styles here.... */#footer h3 {font-family: Arial, Helvetica, sans-serif;font-size: 1.5em;line-height: 1;color: #777;text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}

?

在這個例子中，后代選擇器始終依賴于一個特定的容器（甚至是id選擇器），根本無法復(fù)用。當我們基于OOCSS建立模塊類，確保某些樣式不依賴于外部容器，那我們的樣式類就能夠在任何地方復(fù)用。比如：

.h3-base {font-family: Arial, Helvetica, sans-serif;font-size: 1.5em;line-height: 1;color: #777;text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}#sidebar .h3-base { // 像這樣不想多加class的話，外部也來在所難免，看個人斟酌font-size: 2em;}#footer .h3-base {text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}

?

我們將項目中基本的h3的特性剝離出來，放在一個名為h3-base的類里，在不同的情況（#sidebar和#footer）下，覆蓋各自特有的特性。來讓常用樣式得以在任何地方復(fù)用。

下面這個例子更加清楚的說明了這一原則：

.header-inside {* width: 980px;height: 260px;padding: 20px;* margin: 0 auto;* position: relative; (使內(nèi)部有定位的元素，根據(jù)這個容器來定位)* overflow: hidden;（創(chuàng)建BFC，塊級格式化上下文, 清除浮動）}

?

如果是在一個寬度為980px，頁面內(nèi)容始終居中的網(wǎng)站中，header-inside中有很多帶 * 符號代碼的樣式完全可以抽出來以備復(fù)用（用于寬度980px，居中，絕對獨立的容器）。

.globalwidth { //這里主要是外部容器的通用樣式width: 980px;margin: 0 auto;position: relative;overflow: hidden;} .header-inside { //這里可以看做影響內(nèi)部內(nèi)容的樣式padding: 20px;height: 260px;}

相信globarwidth這個類名，可以在上面提到的應(yīng)用場景中充分被復(fù)用。只需要加一個globarwidth class就能搞定一個外層容器。

?

學(xué)習(xí)進階文章：

http://www.w3cplus.com/css/facebook-status-message-design-with-css??CSS制作Facebook的媒體對象

http://www.w3cplus.com/css/oocss-core? OOCSS——核心篇

?

關(guān)于OOCSS個人總結(jié)：OOCSS是一種思想概念，重點在于：減少對html的依賴，增加樣式的復(fù)用性。將樣式抽象模塊化，增加樣式的復(fù)用性，它減小了CSS樣式表的大小，額外增加了class標記，讓html文件更大了。雖然如此，但小小的標記結(jié)構(gòu)的犧牲換來了樣式表現(xiàn)性能的提升（樣式表是能夠被瀏覽器緩存的），和更高的工作效率，以及能夠持續(xù)維護的樣式模塊，也更具有可讀性。但是在抽象的過程中，需要對需求，設(shè)計有更深層次更全面的理解和抽象，同時也需要設(shè)計和需求較為穩(wěn)定，盡量沒有大的需求或設(shè)計改動，如果設(shè)計不斷改動，需求不斷變化，那么很多抽象的類將會被破壞，最終容易造成代碼混亂不堪。所以在小的項目中有些大材小用。

?使用OOCSS的注意事項（可能幫助你快速上手）：

避免后代選擇器(如不要使用類似于.sidebar h3):這會產(chǎn)生外部容器的依賴；

? 避免用id作為樣式鉤子：id是唯一的，無法復(fù)用；

避免在你的樣式表中給類名附屬一個元素名

? 除非一些很少的情況，避免使用!important：暴力方法，代碼將會難以維護；

? 使用CSS網(wǎng)格（布局重用必備）

?

SMACSS

SMACSS中把樣式根據(jù)邏輯劃分為了5個類別：

1.base:

base類似于我們常用的reset，就是設(shè)定標簽的預(yù)設(shè)值。在這一部分樣式的要求是：不要出現(xiàn)任何的id selector和class selector，但可使用 屬性選擇器和偽類選擇器。

代碼示例：

html{ … }, input[type=text]{ … }, a:hover { … }

?

?

2.layout:

大區(qū)塊的位置、布局樣式。在這里是使用id selector和class selector。

代碼示例：

#header { margin-top: 20px 0; }, .container { margin: 0 auto; width: 960px; }

?

?

3.Module:

module即組件樣式，需要能在任何地方復(fù)用的，自覺和bootstrap中的components非常相似。這里使用class selector和 descendent selector（后代選擇器）.

代碼示例:

.button { background-color: #foo; border: …; width: …; box-shadow: …; padding: …;}.button a { color: #ddd; } 或者 .button .link { color: #ddd; } (多用class,少用tag)

?

?

4.state:?

狀態(tài)，故控制module各個狀態(tài)下的表現(xiàn)的樣式。使用class selector。

.button.hovered { background: …; }.button.actived { background: …; }

?

?

5.theme：

主題，也就是項目特有的主題下的樣式，主視覺效果，主題的樣式去override上面的樣式，來達成需要的視覺效果，就類似于皮膚skin。在google material設(shè)計中，就用了md-default-theme這樣的類名來為各個module添加額外的樣式，比如background-color之類的skin，它也支持用戶自己配置theme的色彩樣式，大愛！

?

關(guān)于SMACSS的個人總結(jié)：根據(jù)CSS rules自身不同的邏輯作用去分門別類非常的cool，使用前一定要花功夫去認真分類樣式，如果分類混亂，將難以復(fù)用。像OOCSS，在需求設(shè)計改變頻繁時，很難把控。

?

ACSS(atomic CSS、原子CSS)

ACSS即為原子CSS，就像自然界中把整個的物體不斷拆分最后都是由原子之類構(gòu)成的（化學(xué)沒學(xué)好），這樣也就不存在物體之間的差別了，所有事物都是原子，也就方便了描述。ACSS把每一條CSS rule都看做一個原子，給rule一個class類名。

示例代碼：

.mr-1 { margin-right: 10px; } .mr-2 { margin-right: 20px; }<div class=“mr-1 of-h foo foo foo foo foo foo ”></div>

?

就用這一個個class復(fù)合在一起，來實現(xiàn)樣式表現(xiàn)。這樣的好處是什么呢？很容易看懂，每個class對應(yīng)的就是那條rule，會CSS的人都能看懂。它聲稱自己語義化的優(yōu)勢，一個好的命名就是在任何時候，都不改變名稱，它做到了。 并且在需求和設(shè)計頻繁改變時，只需要在改變的元素上修改class屬性就搞定了，相當方便，面對改變游刃有余。

但是，ACSS會在你的html文件中添加無數(shù)的class，污染html，可讀性大大降低，如果元素的樣式復(fù)雜，很難想象上面有幾十個class該怎么去閱讀。

關(guān)于ACSS的個人總結(jié)：ACSS最大的優(yōu)點是，應(yīng)對變化相當靈活，在頁面較簡單的情況下，很適合使用，但在復(fù)雜的場景中，html的混亂也會導(dǎo)致嚴重后果。我個人更愿意在項目或者模塊開發(fā)之初使用ACSS，這樣可以應(yīng)對頻繁修改的需求和設(shè)計。當需求和設(shè)計趨于完整穩(wěn)定時，再去用模塊化的思想重構(gòu)它，把雜亂無章的class抽絲剝繭。所以ACSS讓CSS代碼的重構(gòu)變得更容易了。

??

BEM（Block____Element——Modifier）

BEM：Block（塊）、Element（元素）、Modifier（修飾符）

BEM本身是有一套自己的工作流的，指的是由Yandex團隊提出的一種前端命名方法論。BEM的命名約定更嚴格，包含更多的信息。

Block：獨立的、更高級別的組件化抽象。Class selector only。

Element：Block的后代，是Block的構(gòu)成元素。Class selector only。

Modifier：注明了Block的不同狀態(tài)或不同版本。

命名約定的模式如下：

.block {}.block____element {}.block——modifier {}

?

它們中使用兩個下劃線或者兩個破折號只是為了同其他的命名規(guī)范區(qū)別開，避免相互影響。它們之間的符號是可以更換的，沒有強制約定。

下面我們來看一個例子，看看BEM是如何讓元素之間建立起聯(lián)系的：

.car {} // 創(chuàng)建了一個car block.car____tire {} //car里面有組成元素（后代元素） tire.car——china {} //car有一個china造 的形態(tài).car——china____tire {} //既然car有tire組成元素，那china car當然也有tire噢.car____tire——new //car里的tire 有new(old)的狀態(tài)

?

代碼理解：汽車是一個block，汽車有一個組成部分就是輪胎，有的汽車是中國制造，中國制造的車也是有輪胎的，汽車輪胎是新的。

BEM同樣能將這樣的信息傳遞同你合作，或者維護你的代碼的人。盡力在團隊里建立起這樣的命名規(guī)范，將使你和團隊的代碼都更加健壯，更易維護。

但BEM并不是任何地方都能使用的，比如下面這種情況：

.underline { text-decoration: underline; }.caps { text-transform:uppercase; }

?

這些僅僅是一條單獨的樣式，并不需要使用BEM格式的命名。

再看看下面這段存在于網(wǎng)站header塊內(nèi)的logo的代碼：

.site-logo{ … }

?

用BEM格式寫作：

.header{}.header__logo{}

?

雖然logo確實是在header內(nèi)，但作為一個希望被復(fù)用的block，logo也可能出現(xiàn)在footer，side里面，所以并不一定總是存在header中，故不該使用BEM。正確辨別BEM的使用場景尤為重要。

關(guān)于BEM的個人總結(jié)：“class屬性是對tag的細化描述”，并且表達的意思清晰，使用起來也很簡單。“會說話”的class使得樣式代碼語義化，更容易維護，也提高了復(fù)用性。但是要用好BEM需要不斷的積累和思考，使BEM命名標記的使用準確。好東西！

?

Summary

踏上前端的路差不多有一年了，在團隊里主要負責頁面部分的工作。每天混跡在各個前端群里，大部分時候人們都在討論js的問題，作為頁面仔的我還是忍不住為CSS報不平。一年前，正是codepen上面那些酷炫的web動畫將我?guī)狭诉@條路。CSS，作為完全為內(nèi)容表現(xiàn)服務(wù)的語言，它應(yīng)該得到重視。CSS不斷被支持的新特性使web一次次的讓用戶驚艷。Sass、Less等預(yù)處理器也讓CSS如虎添翼，高性能，多樣化的動畫效果對用戶體驗的提升產(chǎn)生了不可替代的作用。喜歡編寫CSS代碼，在今后的路上繼續(xù)學(xué)習(xí)CSS，力圖寫出優(yōu)雅的CSS代碼！酷炫的web特效~！

對頁面特效情有獨鐘，CSS3過渡，動畫，D3數(shù)據(jù)可視化+動畫一直激勵著我上下求索~謝謝一直指導(dǎo)我的良師益友De。

最后，引用一句慕課網(wǎng)上的《CSS框架迷思》的作者的話：“ 沒有語義化的CSS，只有語義化的html和它的表現(xiàn)形式 ”。

轉(zhuǎn)載于:https://www.cnblogs.com/soccerloway/p/4618725.html

總結(jié)

以上是生活随笔為你收集整理的CSS知识总结之设计模式（持续学习中）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。