前言
作为一个前端开发者，我们在编写 CSS 样式时经常需要选择器，而且选择器越准确，优化的空间就越大，可以减少不必要的代码和样式冲突。但是随着项目的增加，选择器也越来越多，手写选择器逐渐变得麻烦和容易出错。这时候，一个由 npm 包 generate-selectors 来帮忙自动生成选择器的工具就变得尤为重要。
generate-selectors 简介
generate-selectors 是一个自动生成 CSS 选择器的开源 npm 包。它可以根据 HTML 模板和样式文件来生成选择器。
该包基于“单纯 CSS”思想而建，即不需要复杂的依赖库甚至是 JavaScript (JQuery)。
相对于其他的选择器工具，它有以下特点：
- 纯 CSS，无需 JS
- 自定义标签名和类名组成，避免不必要的 style 冲突
- 支持复杂的 HTML 模板结构和样式文件
- 生成的选择器名朴素易懂，快速定位
使用教程
安装 generate-selectors
npm 安装命令：
--- - ------------------ --
准备 HTML 和 CSS
在使用 generate-selectors 工具前，你需要先拥有一份完整的 HTML 文件结构和 CSS 样式文件。
在这个例子中，我们将使用如下的 HTML 结构和 CSS 样式：
---- ------------------
---- ---------------
--- -------------
--- ---------------------
--- ---------------------
--- ---------------------
-----
------
---- -----------------
--- -------------
--- ---------------------
--- ---------------------
--- ---------------------
-----
------
------------------ ---------- --------- ---------- ------- ------- ---------- ------- ----- ------- ---------- ----------- ---------- --------- ------- ---------- --------- ----- -------
编写命令
在 package.json 中加入代码：
-
---------- -
--------------------- ------------------- ---------------- --------------- -- ----------------------- -------- -- ----- - ------- ---
-
-其中：
-o表示输出文件，默认输出console--prefix生成选择器的前缀--tag生成的选择器节点类型--class生成的选择器类名
运行命令
在终端中运行以下命令：
--- --- ------------------
成功运行后，将在控制台输出以下代码：
-------------- -- ----------- -- --------- -- --------- -- ------------- --
此时，你的 CSS 文件中就已经存在了自动生成的选择器。
添加选择器
---------------
------ ------
------- ------
----------- ----
-
------------
------ -----
------- -----
------- - -----
-你甚至可以自行修改其中的选择器名，然后在 CSS 文件中添加样式，如：
--------------------- - ----------------- ----- - -- ------- -- -------------------------------- - ----------------- ----- ------ ----- ------- ----- ------- - ----- -
总结
使用 generate-selectors 工具有以下几个优点：
- 纯 CSS，无需 JS
- 避免样式冲突
- 生成的选择器名更朴素易懂，快速定位
当然，使用过程中也有小坑点，例如：
- HTML 模板和样式文件必须严格按照约定，否则无法正确生成
- 自动生成选择器虽然方便了代码减量，但也增加了代码不容易维护，不建议乱搞
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005607b81e8991b448deadc