*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的發展上有大好前程,這是一個概念,所有的開發者都應該開始運用到在他們的專案上 - 或者某種程度的運用 - 能幫助創建的網頁,更快,更高效,更易於維護。

, , ,

CHIBC-暗月之鏡 發表在 痞客邦 PIXNET 留言(0) 人氣()