推薦一個關於 CSS 的投影片:Efficient, Maintainable, Modular CSS!

剛剛在網路上逛一逛,看到了一份介紹 Cascading Style Sheets (CSS) 的投影片:Efficient, Maintainable, Modular CSS!這份投影片的內容還不錯,大家可以參考一下:


這份投影片中,其中有幾個主題個人覺得蠻有意思的,因此去 Google 了一下,將一些心得摘要上來:

  • Modular CSS:

在這份投影片的第 60 頁至第 77 頁提及的主題為:將 CSS 模組化!以前我都將整個網頁的 CSS 從頭到尾寫在同一個檔案中,然而,這粉投影片則是提倡不要這樣做,如果可以將整個網頁的 CSS 分割成數個模組,例如:container.css, header.css, content.css, footer.css… ,或是依照頁面來區分:main.css, page.css, signle.css… 如此,將會比較方便管理,也比較容易專注在特定的部位。

也許有人會說,可是這樣的話,在 html head 上的 stylesheet link 不就要寫很多了嗎!?這份投影片中,則是建議我們可以再加個 CSS Bridging File,因此,在 head 中,只需要參考到這個 CSS Bridging File 即可,如下所示:

1
<link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">

然後,在將其他模組化的 CSS File 匯入即可!程式碼如下所示:

1
2
3
@import ‘header.css’;
@import ‘content.css’;
@import ‘footer.css’;

原作者最後則是提到,這樣的做法的優點則是:相當適合用來管理大型的網站:

  • Hack Free CSS:

投影遍第 78 頁開始則是在討論:許多網頁設計者當面對到一些 Buggy Browser (例如:M$ IE) 的問題時,常常會採取一些旁門左道 (Hacks) 來解決在那些特定瀏覽器上會發生的問題。然而,原作者則是強烈建議大家:千萬不要這麼做!而應該要使用”條件式註解” (Condictional Comments) 來解決這些個案的問題!

什麼是 Condictional Comments???其實,就是做個 if 條件式,當判斷是特定瀏覽器時,則使用另一個 CSS File!請見以下的程式碼:

1
2
3
<!–[if IE 5]>
    <link rel="stylesheet" href="ie5.css" type="text/css" media="screen">
<![endif]–>

好的,以上是簡單的內容分享!