物件導向 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 等等。且看發展如何?

回應

*