在前端开发中，我们常常需要从后端获取含有样式的 HTML 代码，但是这段代码中的 css 样式可能会有重复、失效或者不必要的代码。此时我们可以使用一个 npm 包叫做 html-clean-embedded-css 来帮助我们去除这些不必要的 css，让我们的代码更加精简和高效。
安装
使用以下命令在你的项目中安装 html-clean-embedded-css：
npm install html-clean-embedded-css --save-dev
如果你使用的是 yarn：
yarn add html-clean-embedded-css --dev
如何使用
在使用 html-clean-embedded-css 前，我们需要先导入它：
const { removeUnusedCss } = require('html-clean-embedded-css');然后我们可以使用一个简单的方法来操作我们的代码：
const cleanedHtml = removeUnusedCss(originalHtml);
这个方法接受一个原始的 HTML 字符串，并返回一个经过清理后的新字符串。
实际示例
我们现在有一个这样的样式 HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------- ----- -------- --- ------------
-------
----- ------------------------ ----------
-------- ------------------
---- ------------
---- -----------------
--- ------------- ----- --------------- ------------
----- -- ---
-----
-- ------------- ------ ---------- -------
---- -- - ---- -- --- ---- ----- -------- --- --------
----
------
---- -----------------
---- ----------------------------------------- ----------------- --
------
------
----------
-------
-------我们可以先将这个 HTML 保存在一个变量中：
-- -------------------- ---- -------
----- ------------ - ---------- -----
----- ----------
------
----- --------------- --
----------- ----- -------- --- ------------
-------
----- ------------------------ ----------
-------- ------------------
---- ------------
---- -----------------
--- ------------- ----- --------------- ------------
----- -- ---
-----
-- ------------- ------ ---------- -------
---- -- - ---- -- --- ---- ----- -------- --- --------
----
------
---- -----------------
---- ----------------------------------------- ----------------- --
------
------
----------
-------
---------然后我们可以使用 removeUnusedCss 方法对这个原始的 HTML 进行清理：
const { removeUnusedCss } = require('html-clean-embedded-css');
const cleanedHtml = removeUnusedCss(originalHtml);
console.log(cleanedHtml);我们可以看到输出的清理后的 HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------- ----- -------- --- ------------
-------
------
---------
-----
-----
----
----- -- ---
-----
---
---- -- - ---- -- --- ---- ----- -------- --- --------
----
------
-----
---- ----------------------------------------- ----------------- --
------
------
----------
-------
-------我们可以看到所有的样式都已被删除，只留下了必要的 HTML 标签。
总结
通过使用 html-clean-embedded-css 这个 npm 包来简化我们从后端获取样式的代码，我们将大大提高我们的代码效率和代码质量。虽然使用这个包可能需要一些学习成本，但是掌握它将有助于你更好地处理 HTML 中的样式，并使你的代码更加高效和优美。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cca81e8991b448e6529