網頁版導覽列

br

2022-02-03T14:34:00+08:00

CSS檔案過大,如何減小?

CSS檔案過大,如何減小

CSS過大最直接的影響就是頁面載入速度

舉個例子,將一個CSS檔案想像成一部大貨車,上面滿載著五顏六色的油漆,今天的目的是要為一棟房子將牆面漆成白色,而貨車上大部分顏色的油漆其實都是用不到的,這時其實只要派出一輛載著足夠的白色油漆的小貨車就可以啦!

縮減CSS大小是一個巧妙的藝術,減少CSS大小的技巧如下:

減少重複定義
class重複使用
運用CSS簡寫
減少換行
刪除最後一個分號
色碼縮寫,例如 #ffaacc 縮寫為 #fac
0px 縮寫為 0
使用工具壓縮CSS

若一份CSS已經用盡了上述技巧,但檔案仍然過大,那麼就應該依照網站頁面版型拆分CSS,不同版型載入相對應的CSS內容。


可改善方法:

1.減少注釋

不必要的註釋,可以讓CSS更簡短

2.改成縮寫版本

長寫版本:

#container{

padding-top:5px;

padding-right:10px;

padding-bottom:30px;

padding-left:18px;

}

縮寫版本:

#container{

padding:5px 10px 30px 18px;

}


3.合理的字體類型

之前#container{font-family:Palatino,Georgia,Times,serif;}

之後#container{font-family:Palatino,serif;}


4.去掉斷行

查看每一個樣式屬性,並將不需要的硬返回去掉。你也可以去掉最後一個分號。

之前

#container{

margin:5px;

padding:5px 10px 30px 18px;

}

之後

#container{margin:5px;padding:5px 10px 30px 18px}


馬上加入姐妹淘粉絲團!最新美食話題都在這!

即時追蹤!第一手情報!
隱藏版美食消息不藏私

搜尋ID:@tao.idea
加入姐妹淘 美食一把罩