2013-01-18 61 views
3

我在做一個關於CSS最佳實踐的搜索,想想維護我的代碼的最佳實踐是什麼,我讀了幾乎所有我學到的東西,但它來自谷歌。 我總是喜歡使用多個樣式表。我發現維護代碼更好,而且我的代碼也不會加載幾個不會被使用的css類。使用多個外部樣式表或儘可能少?優點和缺點

谷歌開發者指導我們完全oposite:

外部樣式表合併成少數文件儘可能減少了往返時間和延遲下載其他資源。

這裏是在生產你的CSS文件,結合一些經驗法則,還建議他們:

  1. 分區的CSS到2個文件每個:包含需要渲染的最小碼一個CSS文件在啓動頁面;和一個CSS文件,其中包含在頁面加載完成之前不需要的代碼。
  2. 在其自己的文件中爲很少訪問的組件提供CSS。僅當用戶請求該組件時才提供文件。
  3. 對於不應該被緩存的CSS,考慮內聯它。
  4. 不要在CSS文件中使用CSS @import。

真的...... Google推薦內嵌css時,css不會被緩存?或儘可能少使用css文件? (當然,我們不應該爲每件事情都使用css,但是我們總是閱讀經驗豐富的網頁設計師推薦使用多個樣式表,所以我非常困惑(如果它不是來自谷歌,我會忽略,但是作爲是的,我想過問計算器的用戶的意見,因爲我認爲它可以幫助他人太)

PS:。You can find here the address of the information I posted

+0

什麼他們說做了很大的意義。嘗試儘可能少地加載儘可能少的CSS文件。第一個應該是你需要運行網站的基礎,第二個應該是在加載時不需要的東西。所有這些只是爲了減少加載時間,並使整個網站的效率更高。我感覺合理。 –

+0

但是,當你加載數以千計的不在頁面中使用的css類時(例如,當你構建一個巨大的系統時),這不是一個壞習慣嗎? – periback2

+0

他們沒有說任何關於加載你不需要的東西。事實上,他們說的是相反的。加載網站在開始時運行所需的最低限度,然後再加載其他所有內容。 –

回答

2

頁面請求通常需要更長的時間,然後加載一些額外的字節爲單位爲什麼Google會建議他們做什麼,這確實是最佳做法,我也是這麼做的。

爲了保持代碼的組織性,您應該考慮使用像less(lesscss.org)這樣的css預處理器。通過這種方式,您可以將代碼保存在單獨的文件中以便於開發。然後你可以在你的主文件中使用一堆@import語句,並將其編譯爲css。那是你需要在你的頁面中加載的唯一的css文件。請確保@import .less文件,而不是.css文件,因爲後者仍會生成額外的頁面請求。

1

那麼當你編寫代碼時,你可以把它全部保存在不同的樣式表中,然後你可以把它全部轉儲到最後。

這是給移動用戶使用,所以你的頁面會減少服務器請求&走得更快。 CSS精靈是相同的想法,也有圖像壓縮器。並提供有關響應式設計的大量信息。

http://www.speedawarenessmonth.com/15-things-for-making-your-site-faster-for-mobile-users/

你可能會尋找一樣都不能少或薩斯工具,使其更容易: 閱讀:http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/

下載:http://crunchapp.net/