前言
在 web 前端开发中，CSS 是网页排版和样式的关键。然而，有时 CSS 中出现的样式不够整洁，难以跨团队协作。这时候，我们可以使用 CSS 代码风格检查工具来规范化样式代码。
CSScomb 是一款通用的 CSS 代码风格处理工具，包括了近 20 种 CSS 规范风格的预设文件，使 CSS 代码风格规范化无需繁琐的人为操作，让开发者更加专注于业务逻辑。
针对 CSScomb 工具官方推出的规范配置 csscomb-config-dup， 本文将重点讲解如何使用它来优化 CSS 代码。本篇文章将从以下几点进行阐述：
- csscomb-config-dup 简介
- csscomb-config-dup 的安装与使用
- csscomb-config-dup 的定制
- 总结
csscomb-config-dup 简介
csscomb-config-dup 是 CSScomb 工具的一款内置配置文件，它使用了去重的方式来规范化 CSS 代码，主要优点包括：
- 提高可读性：将相似的样式归类在一起，使得样式选择更加清晰。
- 减小代码大小：去除了冗余的代码，让 CSS 文件更加精简。
- 自动格式化：自动整理的代码比人工整理优雅，减少了不必要的主观性。
csscomb-config-dup 的安装与使用
安装
使用 npm 安装 csscomb-config-dup 最为方便。在命令行工具中输入以下命令：
npm i csscomb-config-dup --save-dev
使用
安装 csscomb-config-dup 之后，我们可以直接使用 CSScomb 工具来校验我们的 CSS 代码：
csscomb /path/to/your/css/folder
但对于经常使用 CSScomb 的网页制作人员来说，每次输入完整路径费样很麻烦，这时候我们可以在 csscomb 命令后输入 -c 参数，指定要使用的配置文件，进而省略某些项目中的文件以加快执行速度。
csscomb -c node_modules/csscomb-config-dup/csscomb.json /path/to/your/css/folder
指定目录 folder 中所有的 css 文件都将使用 csscomb-config-dup 进行格式化。
csscomb-config-dup 的定制
CSScomb 提供了一份 CSScomb 自定义配置文件的详细文档，开发人员可以通过修改该配置文件实现自己的格式化需求。详细的配置内容可以在 csscomb 的 GitHub 仓库中查看：
https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
下面我们以修改 csscomb-config-dup 为例来简单介绍一下配置文件的定制。
定制步骤
- 复制 node_modules/csscomb-config-dup 文件夹下的 csscomb.json 文件到项目文件夹中并重命名。
- 修改配置文件中您想定制的部分。
- 在命令行中指定新的配置文件。
chrome 启动时自动加载此配置文件可以使用以下命令：
csscomb -c your/path/config.json
配置示例
我们下面以修改 csscomb-config-dup 中去除多余的 margin 属性为例进行演示。
首先，我们复制 csscomb.json 文件，取名为 csscomb_custom.json，并将其中代码 "strip-spaces" 改为 false，以避免去除 margin 属性前后的空格。然后，将代码“strip-spaces-after-value”改为“margin”并将“strip-spaces-value”设置为 “-1”，如下所示：
-- -------------------- ---- -------
-
---------- -
---------------------
-------------------------
------------
-------------
--------------
-------------
-------------
--------------
---------------
----------------
---------------
---------------------
----------------
--
--------------- ------
---------------------- ------
------------- -
------------ -----------
------- -------- --------- --------
----------- ------------- -------- -------- ----------- ------------- ------------- ------- --------
--------- ------------ ------------ --------- ------------- --------------
---------- ------------- --------------- ---------------- -------------- ------------------
----------- -------------- ---------------- ----------------- ----------------
---------- ------------- --------------- ---------------- -------------- --------------- --------------- --------------- ------------------- ------------------- ------------------- --------------------- --------------------- --------------------- ---------------------- ---------------------- ---------------------- -------------------- -------------------- -------------------- ---------------- ------------------------- -------------------------- ----------------------------- -----------------------------
-------- -------------- ------------ -------------- --------------- ------------- --------------- --------------------
--------------- -------- ------------- ------------------- ------------------- -------------------- ---------------------- ------------------------ -------------------
-------------- ---------------
----------- --------- --------------
---------- --------- ------------------
-------------- ---------------------- ---------------------- ----------------------------- ------------ ----------------- --------------------- ---------------------- ------------------ ---------------------------- ---------------------- -----------------------------
----------- --------- ---------------- -------------------- --------- -------------- ------------ --------- ------------ ----------- ----------- ----------- ---------- ------------- ------------------ --------------- -------------- ----------------- --------------- -------------- ------------------ ---------------- ---------------------- ---------------------- ------------------------- -------------- -------------- ------------- ---------------------- ------------------ --------------- --------------- -------------- ----------------- ------------ --------------- --------------- ------------------- -------------------- -------------------- ---------- --------- --------- ------------------------ ------------------------ -------------------- ----------------- ---------------------- ------------------------------ ------------------ ------- --------------- ------------ --------- ------- --------- ----------------- ------------------- -------------------- ----------------- ------------------ -------------------- --------------- --------------------- ---------------- -------------- ---- -----------
--------------------- ------------ ----------------- ---------------- ----------------
---------------------- ------------------ ----------------- ---------------- --------------
--------------------- ----------------- ---------------- --------------- -------------
---------------------------
-----------
---------------------- ------------------ ----------------- --------------
---------------------- ------------------ ----------------- --------------
------------------------- --------------------- -------------------- -----------------
------------------------ -------------------- ------------------- ----------------
-----------------------
----------- ---------------- ---------------- -----------------
--------------------- ----------------------- ------------------- ----------------
------------------- --------------------- ----------------- --------------
-------------------- ---------------------- ------------------ ---------------
-------------------------- ---------------------------- ------------------------ ---------------------
-------------------------- ---------------------------- ------------------------ ---------------------
-------------------------- ---------------------------- ------------------------ ---------------------
--------------------- ----------------------- ------------------- ---------------
--
--------------------- -
-------------
---------------
----------------
-------------
--
--------------------------- -
---------------------
------------------
-----------------
------------
-
-在上述配置中，我们将 strip-spaces-value 参数中的 margin-top、margin-right、margin-bottom 和 margin-left 全部修改为 margin，表示去除该属性前后的额外空格，从而使样式代码更加简洁整洁。
总结
至此，我们简单地介绍了 csscomb-config-dup 的安装、使用以及配置。CSScomb 与 csscomb-config-dup 它提供了大量的 CSS 代码风格预设，让我们省去人为编写，提高代码整洁程度和可阅读性，使前端团队开发更加详实。尤其是通过 csscomb-config-dup 可以帮助我们快速将 CSS 文件格式化，相应的定制化功能也可以直接让我们为项目添加我们自己的规则，从而使我们的代码更加符合团队风格，具有较高的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590681e8991b448d65e7