1. 首頁
  2. 問答
  3. 如何優化CSS代碼？

如何優化CSS代碼？

2012-07-21 97 views
0

我應該如何優化CSS代碼？有各種CSS3線，如-moz-和-webkit-，border-left-left-radius等。我相信較大的CSS文件會顯着增加頁面加載時間。如何優化CSS代碼？

另一個問題：我寫了相當多的代碼，但其中一些代碼沒有被使用。我有超過2000行的CSS代碼，我打賭大概200-300行可能會被刪除，甚至更多。值得修改所有的代碼嗎？這將需要相當長的一段時間......

來源

2012-07-21 Jack

+0

Chrome的開發工具可以告訴你哪些CSS規則沒有被使用...... – 2012-07-21 17:31:19

+1

修改你的代碼並不是一個壞主意。 – dave 2012-07-21 17:32:27

+1

如果確保CSS文件被緩存（在瀏覽器中），不管CSS文件有多大都不應該成爲問題...... – 2012-07-21 17:32:32

回答

4

GZip the files上傳他們在服務器

這將減少文件之前顯著大小

編輯：gzip壓縮的影響 -

通過使用gzip壓縮的。關於Bargaineering的css文件，其大小從28.2K降至7.3K，節省了74.1％。

來源

2012-07-21 17:31:12 Dipak

0

文件越小，下載越快，用戶可以渲染樣式的速度越快。有各種縮小文件的腳本，我檢查出YUI壓縮機：http://refresh-sf.com/yui/

來源

2012-07-21 17:32:38 Wex

2

  • 總是刪除最後一個分號：

    body { background: black; color: white; }
    到
    body { background: black; color: white }

  • 結合多種特性：

    .class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
    到
    .class { margin: 10px 20px 30px 40px; }

  • 使用簡單的顏色（而不是`#FFFFFF, #AABBCC, #FF0000把#FFF, #ABC, #F00）

  • 最重要的事情：minify your code上傳服務器之前。它將刪除空格和註釋，並顯着減少代碼和文件大小。

來源

2012-07-21 17:33:41

+2

'margin：10'將不起作用（它只適用於'0'）。此外，刪除最後一個分號是矯枉過正的。 – 2012-07-21 17:37:31

+0

感謝您的更正。刪除了。 我見過很多關於刪除最後一個分號的建議，我從來沒有看到有人說這是壞的。但是，我更喜歡總是使用分號。這是一種習慣+稍後添加代碼會更容易。 – 2012-07-21 17:52:53

+0

您的左右邊距值是向後的，在縮短的例子中應該是10px 40px 30px 20px。 – austincheney 2012-07-22 12:12:30

相關問題

 相關問題