可以使用 css optimizers 來優化css, 但是我認為如果你使用下面提到的技巧編寫**時,效率和能力都會得到提高。
優化css檔案還能節省流量同時提高頁面載入速度。
1. 注釋
編寫css時注釋顯得格外有用,這樣協同工作的同事就會理解**的含義。注釋方法有多種,你可以使用如下方法:
/*-------------------*/
/*-----comment-------*/
/*-------------------*/
同樣也可以使用下面的方法:
/*comment*/
這樣能節省20個字元,假設有15個注釋,那麼就能節省300個字元。
2. 縮寫顏色**
顏色**用hex codes定義,它包含6個字元,但是一些情況下可以使用3個字元代替。看下面的例子:
div /* shortcode: color:#fff; */
div /* shortcode: color:#f8f; */
div /* no shortcode possible */
3. 合併元素
例如,如果有一堆h2 h3 和 h4這樣的元素,而他們都有相同的屬性,只有個別屬性不同,那麼就可以按如下方法書寫:
h2, h3, h4
h2h3
h4這樣就合併了相同屬性的元素,同時宣告了不同的字型大小屬性。能節省大量的空間。
4. 值為0時省略out px/em/%
0並不需要px,em和百分號。當你的值為0時(我想你會用到),省略單位能節省一倍的字元。
div/* 簡寫: padding: 0 5px 5px 10px; */
5. 合併屬性
一些屬性如padding, margin 與border可以分開寫。例如:padding-top, padding-right, padding-bottom 和 padding-left。
如果可能,合併之,即容易編寫又節省空間。
div/* 簡寫: padding:50px 4px 23px 0; */
如果上下值相同,左右值相同,可以這麼寫:
div/* 簡寫: padding:5px 0; */
6. 明智的選擇classes/id
選擇的classes,id名稱盡量簡短、易懂,有含義。
避免選擇諸如「headermiddleleftcategories」這樣的名稱,可以用「h-cats「代替。這樣能節省大量的字元。
7. 清理css檔案以節省空間
用css建站時,寫好的**可能起作用,也可能不起作用,還占用著不少的空間。應通篇檢查css檔案中的錯誤與無效**以節省空間。
8. 刪除選擇器中最後乙個屬性的分號
這是我在使用css compressor 發現的技巧,看看這個例子:
body
/* shortcode: color:#333 */看到了嗎,我刪除了最後乙個分號。也許效果並不明顯,但是積少成多啊,50個選擇器就是50個字元。
9. 刪除沒用的空格與回車
可能你會刪除所有的空格與回車,因為他們會佔據乙個字元。但這樣做的問題是破壞了css的結構,降低了可讀性。
10.不需要給背景路徑加引號
為了節省位元組,我建議不要給背景路徑加引號,因為引號不是必須的。例如:
background:url("images/***.gif") #333;
可以寫為
background:url(images/***.gif) #333;
結束語如果想全面優化css檔案,我建議使用css compressor,這樣你能自己學到上面這些技巧,也能提高編寫速度與css**的質量。
discuz優化10個小技巧
首先想到的是內建的效能優化,在後台的 全域性 效能優化 是否優化更新主題瀏覽量 是 檢視數開啟防重新整理 是。如果選擇 否 主題 空間 日誌每訪問一次,瀏覽量增1,會增大伺服器壓力,建議選擇 是 開啟延時載入 是。當開啟後,頁面中的在瀏覽器的當前視窗時再載入,可明顯降低訪問量很大的站點的伺服器負擔,...
discuz優化10個小技巧
首先想到的是內建的效能優化,在後台的 全域性 效能優化 是否優化更新主題瀏覽量 是 檢視數開啟防重新整理 是。如果選擇 否 主題 空間 日誌每訪問一次,瀏覽量增1,會增大伺服器壓力,建議選擇 是 開啟延時載入 是。當開啟後,頁面中的在瀏覽器的當前視窗時再載入,可明顯降低訪問量很大的站點的伺服器負擔,...
18個CSS精簡壓縮工具和技巧
在我們討論如何壓縮css之前,需要注意一下在壓縮和 的易讀性上常常要有個平衡。很多編碼者以其css組織清晰為傲,而且並不希望自己的 被 通過壓縮器去掉注釋和斷行。作為乙個設計師,你應該分析你所編寫的 的目標。如果你要建立乙個小的只需要幾行css的 可能就沒有必要做額外的壓 縮。同樣,如果你在編寫需要...