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}