10個精簡優化CSS檔案的技巧

2021-09-01 06:08:47 字數 1793 閱讀 3762

可以使用 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的 可能就沒有必要做額外的壓 縮。同樣,如果你在編寫需要...