如何幫 css 瘦身

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

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

善用 css 簡短寫法

1
2
3
4
5
6
7
8
9
10
h2 {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

可以寫成 h2 {
  margin: 1px 2px 3px 4px;
}

避免過度巢狀的結構

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mainCotent {
  .sidebar {
    .item {
      ui {
        li {
          span {
            i {
              &:after {
              }
            }
          }
        }
      }
    }
  }
}

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

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

使用顏色快捷方式

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

1
2
3
4
5
6
.target {
  background-color: #ffffff;
}
.target {
  background: #fff;
}

移除那些沒有用處的 css

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

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

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

善用 CSS 繼承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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 就不會被比對到，聽起來很抽象。舉個實際例子，假設用了某個彈窗套件跳出彈窗

1
popUpPluging.showModal("hello~~~~");

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