[翻譯]OOCSS物件導向的CSS設計概念 1


*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和內容之間的水平導覽]] >


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC


看完有什麼想和版主講的,沒有就留個「閱」吧

One thought on “[翻譯]OOCSS物件導向的CSS設計概念