越來越多的大型網站開始關注、使用css,對於管理多個復雜CSS文件顯然是有異議的。下面是二系列內容中的第一部分,第一部分我們關注對於管理樣式的觀點,並在其基礎上總結出可行的方案。第二部分我們將對以上結論進行對比。
強大的CSS技術最近幾年已經被廣泛推廣了。感謝Wired redesign(以及後來的highprofile redesigns…,更多組織)和CSS Zen Garden(禅意花園)。
除此之外,有越來越多的設計師加強了對於CSS的學習,並通過學習讓工作更容易、簡單,或者他們本身就是?
它容易嗎?
一旦有人了解並使用了css技術,沒有多少人認為對網站布局和定義用CSS會比用table表格有難度。然而,對於管理大型動態、復雜的網站樣式明顯是一個艱巨的工作。
禁止壓縮
再進一步講之前,我必須澄清一個觀點。以前當我寫gzipping CSS的文章時,大家通過郵件或博客對“如果你的css文件過大,你不知道你應該怎麼辦時不要瘋狂的壓縮它們”發表了各自的看法。那麼,我們看下面列表的同時研究一下如何讓CSS文件更小。
以上是應用css布局、定義網站的css文件大小的詳細數據,它是定義整個網站的css文件大小。每一個CSS標簽樣式代碼單獨寫一行。
以上網站的css文件都大於20Kb,如果你寫的css樣式代碼達到1000行的話,是否應該刪除代碼裡的斷行、空格,或者你應該處理一下那些大而復雜的樣式。CSS文件的大小是個問題,對於以後的維護也是個問題。
但是,當網站上線後,你多久真正管理、維護CSS那?
對於一些上線後的網站來說,它們的CSS基本保持不變的。
我知道在網站出現問題之前我不會對網站的CSS文件進行更新、維護的。我相信Doug網站在他們重新設計改版之前他們也不會對CSS改動太大。像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