使用purifycss精簡css

隨著專案的不斷迭代，我們的css會不斷變大，但通常頁面上需要用到的樣式並沒有那麼多，很多樣式是無用的，而如果靠人工去剔除，吃力又容易出錯。

這種方案很精準，通過篩選有用的選擇器來去掉那些沒有用到的選擇器。換句話來，只保留被用到的樣式，去掉沒用到的樣式。

但這個方案明顯存在缺陷，如果在js裡面對dom的操作（例如對dom新增乙個class樣式等操作），這些如何判斷？很顯然，如果是js中引用到了css樣式的話，這種方案是解決不了的。

那麼怎麼確定乙個選擇器一定不會被用到？從選擇器的型別來看，至少包括下面幾種：

這麼多型別的選擇器，如果簡單以字元解析js，想在js中確定用到了某個選擇器，無疑是比較困難的事情。但我們換個角度來思考，不管選擇器型別多複雜，它們都是由單詞組成的，比如：

h1 => ["h"]

.a .d => ["a", "c"]
.ab-c => ["ab", "c"]
#text => ["text"]
.ab-c #text => ["ab", "c", "text"]

接著，再想想我們在html或者js裡面是如果引用這些選擇器的？無非就是：

$("text").addclass(".a");

比如上面例子中：

選擇器h1的單詞集合["h"]在html或者js中並沒出現，因此選擇器h1是無用的。

選擇器.a .d的單詞集合["a", "d"]在js中只出現了單詞a，而沒有出現單詞d，因此選擇器.a .d也是無用的。

因此，怎麼確定乙個選擇器一定不會被用到這個問題，就轉化成，如何確定乙個選擇器的單詞集合是否是html或者js**中的單詞集合的子集這個問題。

那麼判斷乙個選擇器的單詞集合是否是html或者js**中的單詞集合的子集，如果是就保留，如果不是就丟棄掉好了。

這種方案通過剔除一定不會用到的選擇器，換句話來說，它只能知道某個選擇器可能被用到，無法確定某個選擇器是一定會用的到。

如果有仔細注意上面的例子，就會發現如果我們的html結構是這樣的，選擇器.ab-c依舊會被保留下來

在實際應用中，我們發現這種方案還是能剔除很多不必要的樣式（所以目前測試的案例不多）:

因此，從原理和效果上來看，第二種方案來實現剔除css是極不錯的，在實際運用中，採用開源的purifycss (畢竟有現成的，就沒必要自己造輪子了)。

舉個例子，我的html結構和css引用是這樣的：

.bg

.bg

解決：在精簡css的時候，需要把css裡面的相對路徑替換成絕對路徑

// 將css中的引用的相對路徑轉化為絕對路徑

function relative2absolute(csscontent, base) 
return "url(" + url.resolve(base, _url) + ")";
});}

歡迎使用CS

本markdown編輯器使用stackedit修改而來，用它寫部落格，將會帶來全新的體驗哦 markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題，將某些文字標記為粗體或者斜體，建立乙個鏈結等，詳細...

歡迎使用CS

66666666666666666666 toc 你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下markdown的基本語法知識。全新的介面設計，將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式，markd...

歡迎使用CS

建立乙個自定義列表 如何建立乙個註腳 注釋也是必不可少的 katex數學公式 新的甘特圖功能，豐富你的文章 uml 圖表 flowchart流程圖 匯出與匯入 你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下mar...