物件導向 CSS

(轉載)
驟眼看來 Object Oriented CSS 好像不過是另一個 CSS Grid，但背後有其一道哲學，就是以 Object Oriented 的方式去寫 CSS (廢話)，著重的是可以通過 code reuse，來分隔結構與皮膚、容器與內容。

可是這怎樣可以達成呢？CSS 本身並沒有所謂 Object 概念，其主要靠的是 Cascade，將 CSS Rules 一路堆疊下去。在這裏可以模擬到一點「繼承」特點，在同一個 tag 上使用多個 class (其實是 composition)。不過要真正做到很有規則，就要靠「自律」：自訂一些規則、實踐方法去跟從。

OOCSS 的方法是由「外到內」地如砌 LEGO 般建築頁面。先要弄好一個 template 檔，裏面只會包含一些 header、footer 等等基本的結構和一些基本元素如 heading、list 等等。然後做頁面時就可以使用 Line 和 Grid，來將這些容器細分為更細小的空間。最後才做內容。而理想的情況是，要做新頁或加入新的元素時，只要更動 HTML 就好。

不過因為 Cascade 特性，所有元素理論上也會繼承母元素的樣式，這當中可能要苦計一番 Specifity 和經常使用 !important 來 override 或 reset 樣式。另一個問題是，我們通常都不會第一時間想到最適合的結構和樣式，這當中又有沒有簡單的方法，如 Programming 般做到 Refactoring？

暫時放出來的 OOCSS 只有 template 和 Grid 的部份，以 YUI Grid 為基礎，暫時也很難從例子見到成效如何。(template 部份還連結錯 CSS…) 接下來還會有 Module Structures、Module Skins、Content objects 等等。且看發展如何？