在前端开发中，经常会用到CSS来进行样式设计，其中的类名命名经常会遇到重名、过长等问题，这就会导致CSS代码比较混乱，难以维护。为了解决这个问题，我们可以使用npm包modular-css-short-namer，来为我们快速生成简洁、有意义的类名。
什么是modular-css-short-namer？
modular-css-short-namer是一个 npm包，是基于modular-css的插件，其主要功能是为模块化的CSS生成短、有意义的类名。
短类名可以帮助我们减少CSS文件大小，提高加载速度，也方便我们更好地维护和管理CSS代码。
如何使用modular-css-short-namer？
首先，我们需要在项目中安装modular-css-short-namer，可以使用以下命令：
npm install --save-dev modular-css-short-namer
安装完成后，我们需要在modular-css配置文件中引入该插件。我们先来看一下一个简单的modular-css配置文件：
-- -------------------- ---- -------
----- --- - -----------------------
----- -- - --------------
-----
---- ------------------
------ -
------------
--
---------- --- -- -- -
----------------------------------- -----
---现在我们来加入modular-css-short-namer插件，配置文件如下：
-- -------------------- ---- -------
----- --- - -----------------------
----- ----- - -----------------------------------
----- -- - --------------
-----
---- ------------------
------ -
------------
--
------ --------
---------- --- -- -- -
----------------------------------- -----
---我们可以看到，在传递给css函数的配置对象中，我们增加了一个namer属性，其值是modular-css-short-namer插件。
现在，我们就已经完成了modular-css-short-namer的配置。
modular-css-short-namer如何生成类名
为了更好地理解modular-css-short-namer是如何生成类名的，我们可以来看一下生成规则。
modular-css-short-namer的类名生成规则如下：
- 每个类名由三个小写字母组成。
- 一个模块中的类名使用相同字母开头，如：a-module、ab-module、ac-module。
- 如果一个字母已经在该文件中使用，则会跳过该字母，直到找到未使用的字母为止。
示例代码
我们来看一个示例代码，在src目录下新建一个CSS文件test.css，内容如下：
-- -------------------- ---- ------- ---- - ------ ---- - ------ - ------ ------ - ----- - ------ ----- -
完成后，在终端中输入以下命令：
npm run build
build脚本如下：
"build": "npm run css && npm run html", "css": "modular-css src/index.css dist/index.css --json dist/index.json -w --auto", "html": "handlebars templates/index.hbs -p dist/index.json -o index.html"
可以看到，我们的CSS文件被转化为JSON，并生成了短类名。
生成的JSON文件如下：
-- -------------------- ---- -------
-
------- ---------------
---------- -
------ ------
-------- ------
------- -----
--
------- -
-------
--------
-----
--
--------- ----- --- ------ ----------------- --- ------ ------------------ --- ------ ------------
----------- -------------
-在CSS文件dist/index.css中，我们可以看到短类名已经被成功应用：
-- -------------------- ---- ------- ---- - ------ ---- - ---- - ------ ------ - ---- - ------ ----- -
结论
通过使用npm包modular-css-short-namer，我们成功地生成了简洁、有意义的短类名，让我们的CSS文件更加简洁易懂、易于维护。modular-css-short-namer生成的短类名，不仅可以减小CSS文件大小，还可以加快加载速度，提高用户体验。
总之，对于前端开发人员来说，掌握modular-css-short-namer的使用，是一项非常有意义的技能，希望本文能为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbc81e8991b448da4c4