Pure.css

最近做的修改還有一個就是把 Bootstrap 換掉,因為我覺得它實在是太大了,包進很多我沒用到的東西,即使是壓縮過的版本也要上百 KB,其實我只需要一部份的元件,像是圖片、引言、程式碼和 grid layout 等,但是這些部分的 CSS 所佔的比例其實超級少,所以我決定找一個新的 framework 把它換掉,結果我挑的是 Yahoo 已經沒有繼續更新的專案 Pure.css

Pure.css 檔案大小比起 Bootstrap 實在小很多,最小化過的版本只有約 17KB,不過 responsive grid layout 的部分是獨立的,該模組的大小約是 9.57KB,和原來使用 Bootstrap 相比,總共大概是只有原來的四分之一(當然 gzip 後沒差這麼多),不過檔案小這麼多一定有所犧牲,Pure.css 提供的元件比起 Bootstrap 來少很多,而且提供的我幾乎都沒用到,最後我只用到 menu 和 grid layout 兩個部分而已,所以又從 Bootstrap 那邊把我要的元件手工複製出來使用,最後整理出來的 CSS 是 36.15KB,gzip 後是 7.3KB,brotli 壓縮過後是 6.34KB,傳輸前的資料量和原來相比大約是三分之一至四分之一,使用 gzip 壓縮傳輸的資料量則是三分之一左右(相較於原本的 18.97KB),整體來說成效不錯,其實 Framework 的部分還是佔了很大的比例,所以下一步就是把整個 CSS Framework 拿掉了,我推估實際上我需要的這些 CSS 大概 3KB 的資料量就夠了。

不過 Pure.css 是個已經沒在維護的專案了,Github 上已經超過一年沒有動靜,再加它其實沒 Bootstrap 那樣簡單用,有很多細節都還是要自己處理,就連它們首頁應該都是加工不少才出來的,所以要用這套 CSS Framework 的人還是要三思啊。