npm 包 `generate-selectors` 使用教程

前言

作为一个前端开发者，我们在编写 CSS 样式时经常需要选择器，而且选择器越准确，优化的空间就越大，可以减少不必要的代码和样式冲突。但是随着项目的增加，选择器也越来越多，手写选择器逐渐变得麻烦和容易出错。这时候，一个由 npm 包 generate-selectors 来帮忙自动生成选择器的工具就变得尤为重要。

generate-selectors 简介

generate-selectors 是一个自动生成 CSS 选择器的开源 npm 包。它可以根据 HTML 模板和样式文件来生成选择器。

该包基于“单纯 CSS”思想而建，即不需要复杂的依赖库甚至是 JavaScript (JQuery)。

相对于其他的选择器工具，它有以下特点：

• 纯 CSS，无需 JS
• 自定义标签名和类名组成，避免不必要的 style 冲突
• 支持复杂的 HTML 模板结构和样式文件
• 生成的选择器名朴素易懂，快速定位

使用教程

安装 generate-selectors

npm 安装命令：

npm i generate-selectors -D

准备 HTML 和 CSS

在使用 generate-selectors 工具前，你需要先拥有一份完整的 HTML 文件结构和 CSS 样式文件。

在这个例子中，我们将使用如下的 HTML 结构和 CSS 样式：

-- -------------------- ---- -------
---- ------------------
  ---- ---------------
    --- -------------
      --- ---------------------
      --- ---------------------
      --- ---------------------
    -----
  ------

  ---- -----------------
    --- -------------
      --- ---------------------
      --- ---------------------
      --- ---------------------
    -----
  ------
------

.container{}
.container .up-box{}
.container .up-box .list{}
.container .up-box .list .item{}
.container .down-box{}
.container .down-box .list{}
.container .down-box .list .item{}

编写命令

在 package.json 中加入代码：

{
  "scripts": {
    "generate-selectors": "generate-selectors ./src/**/**.html ./src/**/**.css -o ./src/css/selectors.css --prefix p- --tag E --class C",
  }
}

其中：

• -o 表示输出文件，默认输出console
• --prefix 生成选择器的前缀
• --tag 生成的选择器节点类型
• --class 生成的选择器类名

运行命令

在终端中运行以下命令：

npm run generate-selectors

成功运行后，将在控制台输出以下代码：

.p-E-container {}
.p-E-up-box {}
.p-E-list {}
.p-E-item {}
.p-E-down-box {}

此时，你的 CSS 文件中就已经存在了自动生成的选择器。

添加选择器

-- -------------------- ---- -------
---------------
    ------ ------
    ------- ------
    ----------- ----
-
------------
    ------ -----
    ------- -----
    ------- - -----
-

你甚至可以自行修改其中的选择器名，然后在 CSS 文件中添加样式，如：

-- -------------------- ---- -------
--------------------- -
  ----------------- -----
-

-- ------- --
-------------------------------- -
  ----------------- -----
  ------ -----
  ------- -----
  ------- - -----
-

总结

使用 generate-selectors 工具有以下几个优点：

• 纯 CSS，无需 JS
• 避免样式冲突
• 生成的选择器名更朴素易懂，快速定位

当然，使用过程中也有小坑点，例如：

• HTML 模板和样式文件必须严格按照约定，否则无法正确生成
• 自动生成选择器虽然方便了代码减量，但也增加了代码不容易维护，不建议乱搞

参考

generate-selectors

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448deadc