*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和內容之間的水平導覽]]
>
Pingback: YSHPace – OOCSS觀念