npm 包 `generate-selectors` 使用教程

阅读时长 4 分钟读完

前言

作为一个前端开发者,我们在编写 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 模板和样式文件必须严格按照约定,否则无法正确生成
  • 自动生成选择器虽然方便了代码减量,但也增加了代码不容易维护,不建议乱搞

参考

generate-selectors

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

纠错
反馈