如何幫css瘦身

Joe Chang

Published in

Coding Hot Pot

Mar 9, 2020

當多人一起開發，時間一久，為什麼css不知不覺就變得這麼肥大呢…

善用 css 簡短寫法

h2 { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; } 可以寫成
h2 { margin: 1px 2px 3px 4px; }

避免過度巢狀的結構

scss or sass寫習慣之後，一不小心很容易寫出類似波動拳的結構
像這樣

.mainCotent{
 .sidebar{
  .item{
   ui{ 
    li{ 
     span{ 
      i{ 
       &:after{       }
      }
     }
    }
   }
  }
 }
}

然後你改不動同事的code，他也改不動你的(來互相傷害阿)，開始瘋狂使用!important 又是另外一個故事了…

除了難以維護之外，過度巢狀的結構會讓你的css變得又臭又長，網頁渲染速度變慢，最直接的影響當然是css檔案變大，之前碰過css檔案逼近1MB的，所以巢狀層級不要超過3級。

使用顏色快捷方式
像這種16進位的色碼就可以縮寫，省下三個字元也是省，積沙成塔！

.target { background-color: #ffffff; } 
.target { background: #fff; }

移除那些沒有用處的css

有時候頭昏腦脹的時候，不知不覺寫下沒有用處的css

display:block 搭配 vertical-align:middle
display:inline 搭配 width、height、margin、padding以及float。

有發現問題嗎？後面寫的那些屬性都不會起作用，用瀏覽器f12來看，屬性會是被劃掉的，vertical-align:middle，只能設定在display:inline;display:inline-block身上，就像是你要雷屬性的皮卡丘使出水屬性水箭龜的招式「加農水炮」根本是不可能的。

善用CSS繼承

#wrapper span{ font-size:14px; }
#wrapper p{ font-size:14px; }
#wrapper h1{font-size:14px; }
就可以簡寫成：#wrapper{ font-size:14px; }

有些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就不會被比對到，聽起來很抽象。舉個實際例子，假設用了某個彈窗套件跳出彈窗

popUpPluging.showModal('hello~~~~')

最後會在html上生成class是popUp_model的div，然後我們寫了一段popUp_model的css，來修改預設的樣式，在打包階段的時候，對這些套件而言，逐一比對在html裡面卻沒發現popUp_model這個class，就會刪掉popUp_model的css，因此，在使用類似套件上，還是要斟酌看看自己的專案是否適用。

如何幫css瘦身

Written by Joe Chang