CSS設計模式：OOCSS 和 SMACSS
真心覺得寫出 CSS 並不難，但是要寫出可被維護的 CSS 比其他程式語言都還難。所幸已經有許多大師級的人物，提出許多設計模式和思維，借由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該註意的規範。
OOCSS
OOCSS不是什麽新技術，只是一種撰寫 CSS 的設計模式，或者可以說是一種「道德規範」，大致上我覺得重點只有兩個：
- 減少對 HTML 結構的依賴
- 增加 CSS class 重復性的使用
減少對 HTML 結構的依賴
CSS
| 1 2 3 4 5 6 7 |
<nav class="nav--main"> |
一般的導航欄寫法，結構應該會像上面的 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 樣式屬性：
| 1 2 3 4 5 6 7 | .button { display: inline-block; padding: 6px 12px; color: hsla(0, 100%, 100%, 1); &.button-default { background: hsla(180, 1%, 28%, 1); } &.button-primary { background: hsla(208, 56%, 53%, 1); } } |
上面的 CSS 將兩種不同樣式的 button，抽離出重復的部份，並且定義在同個 class
上。因此，要使用這樣的樣式，HTML 的寫法可能長這個樣子：
| 1 2 | <a class="button button-default"> <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，但是可以有屬性選擇器或是偽類：
| 1 2 3 | html {} input[type=text] {} a:hover {} |
Layout
Layout 是指整個網站的「大架構」的外觀，而非 .button 這種小元件的 class。網站通常會有一些主要的大區塊，可能是 header 或 footer，Layout 就是用來定義這些「大架構」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把規則寫在 Layout 這裏。
以下這是個範例：
CSS| 1 2 3 4 5 6 | #header { margin: 30px 0; } #articles-wrapper { ......; } .sidebar { &.sidebar--right { ......; } &.sidebar-left { ......; } } |
通常只有一個選擇器，一個 id、或一個 class。
CSS設計模式：OOCSS 和 SMACSS