CSS教程:編寫易於管理的css

來源:互聯網
上載者:User

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

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

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

名稱 CSS 檔案大小(kb) 注釋
www.mezzoblue.com 20KB 325 行css樣式代碼
www.stopdesign.com 42.75KB 1200 行css樣式代碼
www.wired.com 27.28KB 1014 行css樣式代碼
espn.go.com 20.81KB 799 行css樣式代碼
www.blogger.com 26.52KB 1200行css樣式代碼
www.travelocity.com 31.79KB 400 行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



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。