推薦一個關於 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

然後，在將其他模組化的 CSS File 匯入即可！程式碼如下所示：

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


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

Hack Free CSS：

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

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

1

好的，以上是簡單的內容分享！

摘自：http://4evervoyage.net/2010/01/understand-css/