如何幫 css 瘦身
當多人一起開發,時間一久,為什麼 css 不知不覺就變得這麼肥大呢…
善用 css 簡短寫法
1 | h2 { |
避免過度巢狀的結構
scss or sass 寫習慣之後,一不小心很容易寫出類似波動拳的結構
像這樣
1 | .mainCotent { |
然後你改不動同事的 code,他也改不動你的(來互相傷害阿),開始瘋狂使用!important
又是另外一個故事了…
除了難以維護之外,過度巢狀的結構會讓你的 css 變得又臭又長,網頁渲染速度變慢,最直接的影響當然是 css 檔案變大,之前碰過 css 檔案逼近 1MB 的,所以巢狀層級不要超過 3 級。
使用顏色快捷方式
像這種 16 進位的色碼就可以縮寫,省下三個字元也是省 ,積沙成塔!
1 | .target { |
移除那些沒有用處的 css
有時候頭昏腦脹的時候,不知不覺寫下沒有用處的 css
1 | display:block 搭配 vertical-align:middle |
有發現問題嗎?後面寫的那些屬性都不會起作用,用瀏覽器 f12 來看,屬性會是被劃掉的,vertical-align:middle
,只能設定在 display:inline;display:inline-block
身上,就像是你要雷屬性的皮卡丘使出水屬性水箭龜的招式「加農水炮」根本是不可能的。
善用 CSS 繼承
1 | #wrapper span { |
有些 css 屬性是可以繼承的,假設父元素設置了樣式,內部的子元素就可以直接繼承,不需要再寫相同樣式
可以繼承的樣式有 color、font-size、font-family…
不可以繼承的有:position、display、float…
使用 webpack gulp 等工具幫 css 壓縮化
個人實作經驗,這算是最有感的瘦身方式,至少都可以減少 20%左右的 size
利用線上工具也是可以的!https://www.pagecolumn.com/tool/css_compressor.htm
另外,也有工具可以協助你移除 code 裡面用不到的 css
ex. purifycss、purgecss
原理是比對 css 的 class、id,是否有出現在 html 結構裡面,沒有的話視作沒有用到的 css,在 webpack 打包的時候,一併刪除,聽起來很美好,但實際用起來卻遇到一些問題,如果是 js 動態生成的 class 就不會被比對到,聽起來很抽象。舉個實際例子,假設用了某個彈窗套件跳出彈窗
1 | popUpPlugin.showModal("hello~~~~"); |
最後會在 html 上生成 class 是 popUp_model 的 div,然後我們寫了一段 popUp_model 的 css,來修改預設的樣式,在打包階段的時候,對這些套件而言,逐一比對在 html 裡面卻沒發現 popUp_model 這個 class,就會刪掉 popUp_model 的 css,因此,在使用類似套件上,還是要斟酌看看自己的專案是否適用。