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