前言
一个成功的网站需要有好的 UI 设计和用户体验。而 CSS 样式是实现网站 UI 设计的关键要素。然而，处理 CSS 样式也是每个前端工程师日常工作中的头号痛点之一。此时，一个好的 CSS 样式管理方案是必不可少的。
style-equal 就是这样一个好的 CSS 样式管理工具。它是一个由 Node.js 开发的 npm 包，可以帮助前端开发者更好的管理和使用 CSS 样式。接下来，我们一起来探究一下如何使用 style-equal 这个 npm 包。
style-equal 是什么？
style-equal 是一个 CSS 样式管理工具，它能够自动将 CSS 文件中的样式重命名为可读性更好的“类名”。使用 style-equal，你只需要通过简单的命令行操作，就能轻松地管理你的 CSS 样式。
如何安装 style-equal？
style-equal 是一个通过 npm 安装的 npm 包。要安装 style-equal，你需要先在终端中输入以下命令：
$ npm install --global style-equal
此命令会将 style-equal 安装到你的电脑上。安装完成后，你可以在终端中输入以下命令来查看 style-equal 的版本号:
$ style-equal -v
以上命令应该输出当前安装的 style-equal 的版本号。
如何使用 style-equal？
使用 style-equal，只需要四个简单的步骤：
1. 配置 style-equal
首先，你需要在你的项目根目录中添加一个配置文件 .styleequal.json。这个配置文件的作用是告诉 style-equal 你希望将哪些 CSS 文件进行重命名。配置文件 .styleequal.json 的格式如下：
-- -------------------- ---- -------
-
------------- -
------------
--
----------- ---
--------- ------------------------
------------ ----------------------
------------- -
-在这个配置文件中，你需要指定以下字段：
targetDirs: 需要重命名的 CSS 文件所在的目录。excludes: 不需要重命名的 CSS 文件（一般用来过滤掉第三方库的 CSS 文件）。output: 重命名之后的 CSS 文件输出路径。mapOutput: 重命名映射表输出路径。hashLength: 重命名后的类名的哈希长度。
2. 将 CSS 文件重命名为类名
在你配置好 .styleequal.json 文件之后，你可以在终端中输入以下命令：
$ style-equal rename
接下来，style-equal 将会自动将所有 CSS 文件中的样式重命名为可读性更好的类名。
3. 将类名替换到对应的 HTML 文件中
如果你使用了 Webpack，那么你可以使用 html-webpack-plugin 插件来自动将这些可读性更好的类名替换到对应的 HTML 文件中。你需要在你的 Webpack 配置文件中添加以下插件：
-- -------------------- ---- -------
-------- -
--- -------------------
--------- -----------------
--------- -------------
----- -----
------- ----
---
--- ------------------
-这样，使用 style-equal 生成的映射表将会自动和 HTML 文件关联起来，使得替换操作变得十分简单。
4. 打包你的项目
使用 style-equal 进行样式重命名后，你需要使用 Webpack 或其他前端打包工具来打包你的项目。在打包的过程中，Webpack 将会自动将可读性更好的类名替换回新生成的 CSS 文件中。
示例
下面我们通过一个简单的示例来演示如何在项目中使用 style-equal。
1. 安装 style-equal
首先，我们需要在终端中输入以下命令来安装 style-equal:
$ npm install --global style-equal
安装完成后，你可以在终端中输入以下命令来查看 style-equal 的版本号:
$ style-equal -v
2. 配置 style-equal
接下来，我们需要在我们的项目根目录中添加一个 .styleequal.json 配置文件。如下：
-- -------------------- ---- -------
-
------------- -
------------
--
----------- ---
--------- ------------------------
------------ ----------------------
------------- -
-在这个配置文件中，我们指定了我们需要重命名的 CSS 文件所在的目录为 src/styles，将重命名后的 CSS 文件输出到 src/styles/output.css，将重命名映射表输出到 src/styles/map.json，哈希长度为 8。
3. 将 CSS 文件重命名为类名
在终端中输入以下命令：
$ style-equal rename
现在，style-equal 将会自动将 src/styles 目录下的样式文件进行重命名，并将重命名后的 CSS 文件输出到 src/styles/output.css 中，将重命名映射表输出到 src/styles/map.json 中。
4. 使用重命名后的 CSS 类名
使用 Webpack，你可以使用 html-webpack-plugin 插件自动将这些可读性更好的类名替换到对应的 HTML 文件中。如下，webpack 的配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------------- - ------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- -----------------
--------- -------------
----- -----
------- ----
---
--- ------------------
--
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
-
-
--
---------- -
------------ ---------
----- ----
-
--此时，当打包完成后，Webpack 会自动将可读性更好的类名替换到 HTML 文件和新生成的 CSS 文件中。而在 JavaScript 中，你可以通过引用这些新生成的 CSS 类名来使用样式。
结论
使用 style-equal，我们可以自动将 CSS 文件中的样式重命名为可读性更好的类名。这个 npm 包不仅能够提高团队协作的效率，减少了后期维护的成本，同时也能够让我们更聚焦于网站的设计和用户体验。如果你正在寻找一个好的 CSS 样式管理工具，不妨试试 style-equal。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f543f1f8250f93ef89004a0