前言
作为一个前端开发者,我们在编写 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 模板和样式文件必须严格按照约定,否则无法正确生成
- 自动生成选择器虽然方便了代码减量,但也增加了代码不容易维护,不建议乱搞
参考
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448deadc