關於css管理最佳化的探討

來源Discussing CSS Management and Optimization
譯者bishua

越來越多的大型網站開始關注、使用css，對於管理多個複雜css檔案顯然是有異議的。下面是二系列內容中的第一部分，第一部分我們關注對於管理樣式的觀點，並在其基礎上總結出可行的方案。第二部分我們將對以上結論進行對比。
強大的css技術最近幾年已經被廣泛推廣了。感謝Wired redesign(以及後來的high profile redesigns…，更多組織) 和CSS Zen Garden（禪意花園）。
除此之外，有越來越多的設計師加強了對於css的學習，並通過學習讓工作更容易、簡單，或者他們本身就是？

它容易嗎？
一旦有人瞭解並使用了css技術，沒有多少人認為對網站布局和定義用css會比用table表格有難度。然而，對於管理大型動態、複雜的網站樣式明顯是一個艱巨的工作。

禁止壓縮
再進一步講之前，我必須澄清一個觀點。以前當我寫gzipping CSS的文章時，大家通過郵件或部落格對“如果你的css檔案過大，你不知道你應該怎麼辦時不要瘋狂的壓縮它們”發表了各自的看法。那麼，我們看下面列表的同時研究一下如何讓css檔案更小。

名稱	CSS 檔案大小(kb)	注釋
http://www.mezzoblue.com/	20KB	325 行css樣式代碼
http://www.stopdesign.com/	42.75KB	1200 行css樣式代碼
http://www.wired.com/	27.28KB	1014 行css樣式代碼
espn.go.com	20.81KB	799 行css樣式代碼
http://www.blogger.com/	26.52KB	1200行css樣式代碼
http://www.travelocity.com/	31.79KB	400 行css樣式代碼

以上是應用css布局、定義網站的css檔案大小的詳細資料，它是定義整個網站的css檔案大小。每一個css標籤樣式代碼單獨寫一行。
以上網站的css檔案都大於20Kb，如果你寫的css樣式代碼達到1000行的話，是否應該刪除代碼裡的斷行、空格，或者你應該處理一下那些大而複雜的樣式。css檔案的大小是個問題，對於以後的維護也是個問題。
但是，當網站上線後，你多久真正管理、維護css那？
對於一些上線後的網站來說，它們的css基本保持不變的。
我知道在網站出現問題之前我不會對網站的css檔案進行更新、維護的。我相信Doug網站在他們重新設計改版之前他們也不會對css改動太大。像http://www.travelocity.com/網站又會是怎樣那？或是為了特殊的宣傳，你不得不給網站更新一段時間的內容？
事實上一些網站的css並不是一成不變的。對於大型網站（或者簡單的網站但是結構複雜的）它們是代碼簡潔、備有注釋、組織有序的css檔案。

結論：編寫易於管理的css
通過對以上網站css檔案審查，有一件事情變的越來越明了了。有幾條結論需要我們在一開始編寫css的時候就應該注意，我們應該如何編寫易於管理、維護的 css樣式。
1、繼承樣式、重複利用？
2、你將如何管理hacks相容樣式？
3、你是否應將線上css檔案最佳化在一行，而在編寫的時候可以多行？
4、為了易於管理維護，你是否將你的樣式檔案分為多個檔案？（看digital-web, bleach）
我們一起看一下每一個結論，並對其進行總結後制定一個可行的方案。

繼承與重複利用
Davd在他的“繼承與重複利用”文章裡面做了詳細的分析。其實繼承與重複利用是同一個範疇。在哪裡設定樣式需要根據實際項目情況來定。然而在本文所講的範圍內，在管理大而複雜的樣式時重複利用是經常使用到的。

管理相容樣式
這一觀點是比較重要的。當用css搭建網站時，使用相容樣式是不可避免的。Integrated Web Design: Strategies for Long-Term CSS Hack Management 是一篇很有用的文章，我認為文章裡給我們的三條建議是比較重要的。
1、對css和相容樣式了如指掌
2、注釋、注釋、注釋
3、採用正確修複方法
使用以上三條建議，第一條讓我們盡量的少用相容樣式（瞭解你的相容css樣式意味著你應該清楚何時使用到它們）它們很容易解釋並容易修複的。從而使你定義的css樣式比較容易管理。

多行最佳化為一行，並根據功能的需要對css樣式進行劃分
我之所以將這兩條放在一起是因為它們都需要權衡利弊的。如果我們想讓樣式比較容易管理的話，我們則有必要增加代碼並會增加瀏覽器的請求負擔，比如使用額外的樣式、空白和斷行。

難處理嗎？
有些人認為這些並不重要的。額外的樣式表意味著增加伺服器請求，但對於multi-threading瀏覽器來說並不是問題。同時css軟體像TopStyle很容易將你的檔案壓縮成單行的，因此在工作的時候用多行的版本，當上傳到伺服器的時候用單行的版本並不是一件困難的事情；甚至你會有一些小的指令碼工具來幫你（將你的代碼最佳化為單行就可以上傳了）。

看一下現實情況
記住，這裡我們討論的是怎麼讓大型網站檔案更易管理。為複雜的結構頁面定義樣式（多主題，多層的導航），多樣式表意味著你可能需要使用4-5個檔案：顏色，導航，結構，表單，表格 等等。
除了上面提到的之外，當我們開啟 espn 首頁的時候會有短暫的斷開, 你可能會去想到這是因為額外的請求引起的。每一個網站都會每天都會有基本的更新（大概每周都會有樣式表的更細，有的時候甚至每天更新），同時你也會發現為了將檔案變小上傳到伺服器上是件痛苦的事情。

給予我們的啟示？
回想一下我們討論過的內容，大型網站方便管理的css樣式應為：
1、總體上來說，編寫css時需要重複利用
2、良好的css注釋說明
3、對於相容樣式，需要一個單獨的相容樣式檔案
4、一個以上css檔案或幾個css檔案更易維護管理
5、css本地是多行、斷行的，但是上傳到伺服器上的css應該是最佳化為一行的。
通過以上列表不難看出，組織良好的樣式檔案將會增加css檔案與代碼，同時增加伺服器請求負擔。然而，我們都知道一旦css樣式第一次解析下載後它就會緩衝在本地，這樣以後就減輕了對代碼的反覆請求了。

合理使用沉餘代碼
在合理使用沉餘代碼方面我們應該怎麼做那？它可直接影響著我們對樣式管理維護的方式。好了，讓我們看一下“實用的css管理與最佳化”文章裡面介紹的幾種管理最佳化css的講解。

討論
請用下面的留言區對本文提到的問題列表進行討論，在留言之前請略讀一下“實用的css管理與最佳化”，你的評論可能比上文說的更恰當。

中文原文：關於css管理最佳化的探討
英文原文：Discussing CSS Management and Optimization
轉載請註明以上資訊，以表示對作者和譯者的尊重，多謝！