歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

阿森纳热刺 www.tzxsac.com.cn 真心覺得寫出 CSS 并不難,但是要寫出可被維護的 CSS 比其他程式語言都還難。所幸已經有許多大師級的人物,提出許多設計模式和思維,借由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規范。

(本文的例子用的是 SCSS 語法)
OOCSS

OOCSS 不是什么新技術,只是一種撰寫 CSS 的設計模式,或者可以說是一種「道德規范」,大致上我覺得重點只有兩個:

  1.     減少對 HTML 結構的依賴
        增加 CSS class 重復性的使用

減少對 HTML 結構的依賴
 

CSS Code復制內容到剪貼板
  1. <nav class="nav--main">   
  2.   <ul>   
  3.     <li><a>.........</a></li>   
  4.     <li><a>.........</a></li>   
  5.     <li><a>.........</a></li>   
  6.   </ul>   
  7. </nav>     

一般的導航欄寫法,結構應該會像上面的 HTML 范例一樣,如果要對那些 <a> 標簽定義樣式,CSS 的寫法可能寫成.nav--main ul li a {},這種寫法先不管效能上的問題,可以看出來過度地依賴元素標簽的結構,有可能之后 HTML 結構改變,這個 CSS 就必須跟著重構,造成維護上多余的成本。

若從這個例子來考量,原則上 <a> 都一定會接在 <li> 標簽的后面,一個 <li> 只會有一個 <a>,通常不會獨立存在,那就可以寫成 .nav--main a {},會是比較好的寫法,甚至是直接給 <a> 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。

這樣的寫法,一來效能理論上比較好(我沒辦法驗證),二來層次比較單純。
增加 CSS class 的重復使用

在 OOCSS 的觀念中,強調重復使用 class,而應該避免使用 id 作為 CSS 的選擇器。這種想法就是像
OOP
盡量抽離重復的程式碼,例如以下這個例子,這是兩種按鈕的 CSS 樣式屬性:
 

CSS Code復制內容到剪貼板
  1. .button {   
  2.   displayinline-block;   
  3.   padding6px 12px;   
  4.   color: hsla(0, 100%, 100%, 1);   
  5.   &.button-default { background: hsla(180, 1%, 28%, 1); }   
  6.   &.button-primary { background: hsla(208, 56%, 53%, 1); }   
  7. }   

上面的 CSS 將兩種不同樣式的 button,抽離出重復的部份,并且定義在同個 class
上。因此,要使用這樣的樣式,HTML 的寫法可能長這個樣子:
 

CSS Code復制內容到剪貼板
  1. <a class="button button-default">   
  2. <a class="button button-primary">  

先用 button 宣告此為一個按鈕的樣式,再用 button-default 或 button-primary 作為按鈕底色的區別。這么做可以維護成本變得比較低,例如:想要改網站上所有按鈕的大小,就只要修改 .button 的 padding 而已。
SMACSS

我對 SMACSS 的理解還不是很深入,或許把 Scalable and Modular Architecture for CSS 看完后會有更深一曾的理解。目前對 SMACSS 的概念僅限于它對 CSS 不同的業務邏輯所做的劃分方式:

但我認為原本的設計不是很妥當,因此我自己做了一些改良:
Base

Base 就是設定標簽元素的預設值,例如瀏覽器的 reset 可以寫在這里,如果用的是 Compass,只要 @include global-reset 即可。這里只會對標簽元素本身做設定,不會出現任何 class 或
id,但是可以有屬性選擇器或是偽類:
 

CSS Code復制內容到剪貼板
  1. html {}   
  2. input[type=text] {}   
  3. a:hover {}   

Layout     

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/css-jiaocheng/tc50527.shtml