chibc-暗月之鏡

*OOCSS物件導向的CSS設計概念*

重點1. 把物件(定位)和skin (皮)分開，以利維護及重覆使用
重點2. 把內容和 容器分開 
缺點是HTML那邊會看起來比較亂

翻譯 via +暗月之鏡 - 我英文不夠好，有翻錯還請大家提醒我啊

簡介物件導向CSS（OOCSS）
原文- 路易Lazaris 12, 12，2011 
你聽過 "內容是王道" 這句吧? 身為網頁開發者你的工作也許就是經常要去創造內容，幾乎都聽過這句。雖然是老生常談但確實是吸引使用者來訪的真正原因。

但從Web開發者的角度，也有些人認為，速度才是王道。漸漸的，我個人越來越同意這個看法，近年來許多前端設計師都提出建議，利用改善效能及速度來增進使用者體驗的經驗。

不過，CSS似乎沒趕上這個風潮，大部分被出來提升效能的方法都集中在JavaScript和其他領域。本文會針對CSS這個被忽視的領域，向您介紹物件導向的CSS概念，它可以幫助提高網頁性能和可維護性。

= OOCSS的原則 ========
一如所有物件導向的編碼方式，OOCSS鼓勵代碼重覆利用，創造容易增加及維護，並且更快更有效的CSS樣式表。

根據 OOCSS GitHub在Wiki頁面上的描述，OOCSS基於兩個主要原則。
https://github.com/stubbornella/oocss/wiki

= 結構(Structure)和樣式(skin)的分離 ==

每個網頁中的視覺元素(即樣式)都在內容中被重覆使用，例如組成網站品牌的視覺元素- 顏色、巧妙運用的漸變或是邊框可見度，還有其他看不見的(結構)也都被重覆運用。

如果把這些不同的特色以.class為基礎模組化，元素就能被重覆運用到任何需要相同效果的元素中，看下列範例比較能理解我在說什麼。。
未使用OOCSS原則，CSS看起來像這樣：

01　　#button {
02　　width: 200px;
03　　height: 50px;
04　　padding: 10px;
05　　border: solid 1px #ccc;
06　　background: linear-gradient(#ccc, #222);
07　　box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
08　　}
09 
10　　#box {
11　　width: 400px;
12　　overflow: hidden;
13　　border: solid 1px #ccc;
14　　background: linear-gradient(#ccc, #222);
15　　box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
16　　}
17
18　　#widget {
19　　width: 500px;
20　　min-height: 200px;
21　　overflow: auto;
22　　border: solid 1px #ccc;
23　　background: linear-gradient(#ccc, #222);
24　　box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
25　　}


上述三個元素都有獨立的樣式風格，對應到不可重複使用的#ID。但他們都有一些共同的屬性，這些重覆的部分，可能是行銷要用的或是平常的設計。

現在我們考慮到後續維護後重新規劃，我們可以把部分CSS抽出來，結果會變成這樣。
01　　.button {
02　　width: 200px;
03　　height: 50px;
04　　}
05
06　　.box {
07　　width: 400px;
08　　overflow: hidden;
09　　}
10 
11　　.widget {
12　　width: 500px;
13　　min-height: 200px;
14　　overflow: auto;
15　　}
16 
17　　.skin {
18　　border: solid 1px #ccc;
19　　background: linear-gradient(#ccc, #222);
20　　box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
21　　}

現在所有的元素都用.class來設計，重覆出現的樣式合併到.skin，不需要再重寫好幾行一模一樣的CSS碼。 只要把.skin套用到每個元素上，就能呈現一樣的結果，而且少寫好幾行，之後還可以重覆利用.skin。 

= *容器和內容分離 == 

OOCSS GitHub的wiki上第二個原則是內容和容器(Containers)分離。以下的CSS說明了這個的重要性：
1　　#sidebar h3 {
2　　font-family: Arial, Helvetica, sans-serif;
3　　font-size: .8em;
4　　line-height: 1;
5　　color: #777;
6　　text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
7　　}

這個CSS適用於所有在 #sidebar 之下的 h3元素，如果我們要把相同的設計套用在 #footer的 h3上，除了字型大小還有陰影不同時怎麼辦?

我們可能要這樣寫：

01　　#sidebar h3, #footer h3 {
02　　font-family: Arial, Helvetica, sans-serif;
03　　font-size: 2em;
04　　line-height: 1;
05　　color: #777;
06　　text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
07　　}
08 
09　　#footer h3 {
10　　font-size: 1.5em;
11　　text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
12　　}


或者，可能寫出更槽的：
01　　#sidebar h3 {
02　　font-family: Arial, Helvetica, sans-serif;
03　　font-size: 2em;
04　　line-height: 1;
05　　color: #777;
06　　text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
07　　}
08 
09
/* other styles here.... */
10

11　　#footer h3 {
12　　font-family: Arial, Helvetica, sans-serif;
13　　font-size: 1.5em;
14　　line-height: 1;
15　　color: #777;
16　　text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
17　　}

結果我們不知不覺間複製了不必要的樣式(或根本沒發現)，使用OOCSS，我們預先將特殊的元素及通用元素區分開來，然後各自群組成單獨的模組或物件讓我們在任何地方都能重覆使用。

上例用了繼承選擇器的CSS宣告不能重覆使用，因為他們都被特定的容器包覆(本例是#sidebar或是 footer)

當我們用OOCSS中以.class 為主來設計模組時，要確定樣式是獨立於任何特定的容器元素。也就是要讓樣式能無視結構在文件中的任何地方被重覆使用。


= 實例 ====

為了進一步說明OOCSS，我在重新設計自己的網站的同時看看有什麼可以拿來當例子的，我發現header裡某些設計我想要重覆運用在頁面中的其他元素上。

因此，我就這樣寫我的CSS碼：

1　　.header-inside {
2　　width: 980px;
3　　height: 260px;
4　　padding: 20px;
5　　margin: 0 auto;
6　　position: relative;
7　　overflow: hidden;
8　　}

這裡沒什麼特別獨立的樣式，但是有些寬度可以抽出來組成模組重覆利用，
所以我把他們抽出來變成.globalwidth，結果如下：

01　　.globalwidth {
02　　width: 980px;
03　　margin: 0 auto;
04　　position: relative;
05　　padding-left: 20px;
06　　padding-right: 20px;
07　　overflow: hidden;
08　　}
09
10　　.header-inside {
11　　padding-top: 20px;
12　　padding-bottom: 20px;
13　　height: 260px;
14　　}


屬於 .globalwidth的樣式包括：

固定寬度
用來置中的margin:auto
Relative-position 用來為子元素及內容做定位
左、右padding 20px
clearfixing 把overflow設成 "hidden"

接下來我就能自由的套用這個風格到任何元素上，不需要額外再寫好幾行的CSS。

在我的網站，我重覆利用這些結構元素到主要的內容及頁尾元素上，依不同的設計,這些模組化的風格也能運用到可能位於header和內容之間的水平導覽列，或是任何需要固定寬度的元素上。

加上“globalwidth”後HTML的部分看起來像這樣：
01　　<header>
02　　<div class="header-inside globalwidth">
03　　</div>
04　　</header>
05 
06　　<div class="main globalwidth">
07　　</div>
08 
09　　<header>
10　　<div class="footer-inside globalwidth">
11　　</div>
12　　</footer>


有些人可能會覺得這種把CSS抽出模組化的做法會讓HTML看起來很亂，而且違反CSS和HTML分離的原則。但撇開可能會影響HTML，無疑的這種把CSS抽出來模組化的寫法讓CSS更容易追踪維護及修改共用了這些模組的結構性元素。

= Media Object ===
OOCSS的先驅者之一，是尼科爾沙利文。她創造了一個可以重覆利用的模組稱為 Media Object，她說，創造可重覆運用的模組，可以省掉數百行代碼。


Media Object 是OOCSS威力展現的好例子，能包含任何大小或內容的媒體元素
雖然許多樣式被包括在內容裡，甚致是媒體元素本身的大小，都能變更，Media Object 本身擁有的通用基本樣式可以避免掉多餘的重覆。

OOCSS的好處
我提了一些OOCSS的好處。以下還有更多。

= 更快的網站 ===

OOCSS的性能優勢相當明顯。CSS重複的樣式碼少，文件就小，相對的下載就快。

確實他會造成HTML部分變的比較雜亂而讓HTM的部分的檔案大小變大。但是大部分情況下HTML多出來的檔案尺寸都遠小於OOCSS滅掉的大小。

另外就是OOCSS WIKI提到這是用來增加效能的小利多。當重覆使用CSS碼，你在創造新的樣式時，一行CSS碼也沒增加。對一個大型、重流量的專案來說，這些小優勢有可能就是增加效能的關鍵。

= 易維護的樣式表 ===

在OOCSS的概念中，你不再針對特定目標不停的增加新的樣式表，要維護的變成一組組相關樣式組成的易於維護的樣式模組。

當你需要在網站裡增加新的頁面時，你不需要在CSS檔案下方再增加已經用的樣式。你只需要依規則重覆使用那些已經模組化的CSS。

這種有遠見的做法可以在新增頁面時只用很少的CSS碼。任何已存在的CSS模組都可以用在新的頁面，新頁面需要的增加的CSS可以減到最少。有時候你創一個完全不同風格的新頁面時一行CSS都不用寫。

這些可維護性的好處包括樣式表的穩健性。因為樣式是模組化，當其他開發者建創新新頁面時，用OOCSS內置的網頁比較不容易被新增的樣式影响而破壞格式。

= 需注意的要點 ====
OOCSS有不少爭議性的討論。這裡要澄清幾個常見的誤解。

= 還是有使用ID ===

如果要完全用OOCSS的方式來編碼，那麼你CSS碼會以.class為主，而不採用ID選擇器來設計樣式。

因此很多人誤以為 OOCSS鼓勵完全放棄ID的使用。事實上並非如此。

雖然規則是盡量避免使用ID，但更精確的是，不要在選擇器的部分用使用ID。所以在OOCSS概念下(一樣避免用ID當成選擇器)編寫HTML當然可以用ID讓JavaScript或是段落標示使用。

當然，你可能會遇到這種情況，你的頁面裡已經有一個獨一無二的ID的元素。所以你就省下幾個bytes直接針對ID設定樣式，而不是增加.class。即使在這種特殊情況下，如果你還是可以選擇多設計一組class來可以避免末來特殊ID指定造成的問題。

= 規模較小的專案 ===

對於規模較小的網站和應用程式，顯然完全死守OOCSS會矯枉過正。請不要將本文提到的OOCSS奉為圭臬，還是要看專案來運用。

儘管如此，我還是覺得OOCSS至少讓你開始思考自己專案裡的CSS規劃。一但你開始就會發現在處理大型專案時變的更輕鬆，OOCSS的優點也更明顯了。
= 執行建議 ====

剛開始要過用OOCSS可能反而要多花一點時間。我都還在努力中，所以我不能說自己很有經驗或是有所有OOCSS問題的答案。

但這裡有幾件事你可以先試試，可以幫助你進入OOCSS的思維模式：


避免後代選擇器（不用 .sidebar h3）
避免用ID來連結樣式
避免在附加類的元素（即不做div.header或h1.title）
非必要情況下，最好不用!important
使用 CSS Lint http://csslint.net/ 檢查你的CSS（順便看看其他**神奇**的用法）
使用 CSS grids http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/

這些規則很可能隨時間過去被推翻，但整體而言都算是開發者編碼的好習慣，讓你的CSS更小更易於維護。

= 追踨尼科爾 Sullivan ===

如果你想繼續學習 OOCSS，目前這個領域的先驅者是尼科爾沙利文。
http://www.stubbornella.org/
除了定期在她的博客上張貼 OOCSS文章，妮可做了帶有幻燈片的演示。下面是一些你可能想看看：

物件導向的CSS http://www.slideshare.net/stubbornella/object-oriented-css
高性能網站：尼科爾沙利文（視頻）http://developer.yahoo.com/blogs/ydn/posts/2009/03/website_and_webapp_performance/
我們的最佳做法正在扼殺我們（幻燈片）http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
CSS膨脹（幻燈片） http://www.slideshare.net/stubbornella/css-bloat

= 結論 ===

許多人不信任OOCSS的使用方式，因為許多做法違反以往我們認知的“最佳做法”，。但我相信只要大家明白使用OOCSS的長遠利益，我敢肯定，未來許多開發者都會採用。

總的來說，我認為 OOCSS在CSS的發展上有大好前程，這是一個概念，所有的開發者都應該開始運用到在他們的專案上 - 或者某種程度的運用 - 能幫助創建的網頁，更快，更高效，更易於維護。