使用 uncss 刪除頁面未使用的樣式！

家好，很高興又見面了，我是"高級前端?進階?"，由我?guī)е蠹乙黄痍P注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動力。

什么是 UnCSS

UnCSS 是一個從樣式表中刪除未使用的 CSS 的工具，可以跨多個文件工作，并支持 Javascript 注入的 CSS。

UnCSS 刪除未使用規(guī)則的過程如下：

HTML 文件由 jsdom 加載并執(zhí)行 JavaScript。
所有樣式表均由 PostCSS 解析。
document.querySelector 過濾掉 HTML 文件中找不到的選擇器。
其余規(guī)則將轉(zhuǎn)換回 CSS。

但是使用 Uncss 需要注意以下幾點：

UnCSS 不能在非 HTML 頁面上運行，例如：模板或 PHP 文件。如果開發(fā)者需要針對模板運行 UnCSS，應該從模板生成示例 HTML 頁面，并在這些生成的文件上運行 uncss；或者運行一個實時的本地開發(fā)服務器，并將 uncss 指向該服務器。
UnCSS 僅運行在頁面加載時運行的 Javascript。它不會（也不能）處理在用戶交互（如按鈕單擊）上運行的 Javascript。必須使用 ignore 選項來保留 Javascript 在用戶交互時添加的類。

目前 uncss 在 Github 上通過 MIT 協(xié)議開源，有超過 9.3k 的 star，194k 的項目依賴量，是一個值得關注的前端開源項目。

如何使用 UnCSS

下面是在 Node.js 環(huán)境中使用 uncss 的示例：

var uncss=require('uncss');
var files=['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
  options={
    banner: false,
    csspath: '../public/css/',
    htmlroot: 'public',
    ignore: ['#added_at_runtime', /test\-[0-9]+/],
    ignoreSheets: [/fonts.googleapis/],
    inject: function (window) {
      window.document
        .querySelector('html')
        .classList.add('no-csscalc', 'csscalc');
    },
    jsdom: {
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
    },
    media: ['(min-width: 700px) handheld and (orientation: landscape)'],
    raw: 'h1 { color: green }',
    report: false,
    strictSSL: true,
    stylesheets: [
      'lib/bootstrap/dist/css/bootstrap.css',
      'src/public/css/main.css',
    ],
    timeout: 1000,
    uncssrc: '.uncssrc',
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
  };
uncss(files, options, function (error, output) {
  console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
  console.log(output);
});
/* Specifying raw HTML */
var rawHtml='...';
uncss(rawHtml, options, function (error, output) {
  console.log(output);
});

值得一提的是，UnCSS 還可以與其他 JavaScript 構建系統(tǒng)結合使用，例如： Grunt、Broccoli 或 Gulp，只需要安裝特定的庫即可。

grunt-uncss
gulp-uncss
broccoli-uncss

在 CLI 環(huán)境中使用命令如下：

Usage: uncss [options] <file or URL, ...>
    e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css

Options:

  -h, --help                            output usage information
  -V, --version                         output the version number
  -i, --ignore <selector, ...>          Do not remove given selectors
  -m, --media <media_query, ...>        Process additional media queries
  -C, --csspath <path>                  Relative path where the CSS files are located
  -s, --stylesheets <file, ...>         Specify additional stylesheets to process
  -S, --ignoreSheets <selector, ...>    Do not include specified stylesheets
  -r, --raw <string>                    Pass in a raw string of CSS
  -t, --timeout <milliseconds>          Wait for JS evaluation
  -H, --htmlroot <folder>               Absolute paths' root location
  -u, --uncssrc <file>                  Load these options from <file>
  -n, --noBanner                        Disable banner
  -a, --userAgent <string>              Use a custom user agent string
  -I, --inject <file>                   Path to javascript file to be executed before uncss runs
  -o, --output <file>                   Path to write resulting CSS to

請注意，可以將本地文件路徑（由 glob 處理）和 URL 傳遞給程序。

banner（布爾值，默認值：true）：是否應在已處理 CSS 中的每個文件塊之前添加banner。
csspath（字符串）：CSS 文件與 HTML 文件相關的路徑。默認情況下，UnCSS 使用 <link rel="stylesheet" href="path/to/file.css"/> 中指定的路徑。
htmlroot（字符串）：項目根目錄所在的位置。例如，如果 HTML 引用具有根相對 URL 的本地文件，即 href="/css/style.css"則很有用。
ignore (string[])：提供不應被 UnCSS 刪除的選擇器列表。例如，通過用戶與頁面交互（懸停、單擊）添加的樣式，因為 UnCSS 尚無法檢測到這些樣式。文字名稱和正則表達式模式都可以識別。否則，可以在特定選擇器之前添加注釋：

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}
.selector2 {
    /* this will NOT be ignored */
}
/* uncss:ignore start */
/* all rules in here will be ignored */
/* uncss:ignore end */

支持更多配置，包括：ignoreSheets、inject、jsdom、media、raw、report、strictSSL、stylesheets、timeout、uncssrc等參考文末資料。

參考資料

https://github.com/uncss/uncss

https://m.youtube.com/watch?v=DX7McYRGJ8o

https://uncss-online.com/

ss是一種用來為Html文檔添加樣式（字體、間距、位置、顏色、角度等顯示效果）的計算機語言。學習網(wǎng)站W(wǎng)3school。

css的引用樣式:

一:style標簽（內(nèi)聯(lián)樣式）

通過在head標簽中間新建一個style標簽，該標簽內(nèi)部存放的就是網(wǎng)頁文件中的css代碼。

二：外部引用css文件（外聯(lián)樣式）

新建一個css文件

在head標簽中間新建一個link標簽，通過href屬性設置外部的css文件地址。rel=“stylesheet”表示我們引用的一個樣式表（css文件）。

三:標簽內(nèi)部style屬性（行內(nèi)樣式）

在開始標簽的內(nèi)部可以設置一個叫做style的屬性，屬性的雙引號存放該元素代碼的css樣式（不推薦使用）。

一般用的就是通過link標簽來引入外部css文件來修改樣式，一般修改樣式有字體，顏色，大小，文本居中，間距等。

疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

下面簡單介紹一下外部引用CSS兩種方式：link和@import。

XML/HTML代碼

XML/HTML代碼

@import url("CSS文件");

</style>

兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：

區(qū)別1：默認的差別。link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。

區(qū)別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網(wǎng)速慢的時候還挺明顯

區(qū)別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。

區(qū)別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。　　@import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表，如：　　

main.css ———————-

@import “sub1.css”;

@import “sub2.css”;

sub1.css ———————-

p {color:red;}

sub2.css ———————-

.myclass {color:blue}

這樣更利于修改和擴展。

更多長沙網(wǎng)站開發(fā) 原創(chuàng)內(nèi)容，請關注長沙蒲公英網(wǎng)絡。

原創(chuàng)文章鏈接:http://www.0731pgy.com/a/news/IndustryNews/429.html

在線咨詢

上一篇：基于 Vue 智能提示組件V-Tooltip
下一篇：CSS 實現(xiàn)弧形卡片的 3 種方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

使用 uncss 刪除頁面未使用的樣式！

什么是 UnCSS

如何使用 UnCSS

參考資料

您的項目需求