# css-checker **Repository Path**: mirrors/css-checker ## Basic Information - **Project Name**: css-checker - **Description**: 目标 css-checker 会检查您的 css 样式是否有重复，并在几秒钟内找到具有高度相似性的 css classes 之间的差异 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://www.oschina.net/p/css-checker - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-03-27 - **Last Updated**: 2025-12-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

CSS-CHECKER

Css Checker - 让CSS小而美

English Version

## 目标 `css-checker` 会检查您的 css 样式是否有重复，并在几秒钟内找到具有高度相似性的 `css classes` 之间的差异。它旨在避免文件之间出现冗余或`相似的 css`和`样式化的组件`，并适用于本地开发和 CI 等自动化。 它默认支持代码的相似性检查、重复检查、颜色检查以及长行警告。您可以为未使用的 CSS 检查选择启用样式组件检查，CSS checker 还可以帮助开发人员在几秒钟内减少 CSS 的代码。

查看更多Wiki

## 安装 #### 使用 go: ``` go install github.com/ruilisi/css-checker@latest ``` (对于 go 1.17 之前的版本，请使用 `go get github.com/ruilisi/css-checker`)。或者从[releases](https://github.com/ruilisi/css-checker/releases)下载。 #### 使用 npm: ``` npm install -g css-checker-kit ``` ## 用法 #### 运行 - `cd PROJECT_WITH_CSS_FILES` 并且直接运行: ``` css-checker ``` - (Beta: Styled Components 检查，如您使用 Styled Components，可开启): `css-checker -styled` ![DEMO](https://assets.ruilisi.com/css-checker-demo.gif) （它可以检查 classes 之间的相似性，并显示（>=80%）相似度的 classes 之间的差异。默认情况下，他还能找出使用了多次的颜色、长脚本。可以用`css checker -help`来查看自定义选项。） - 它能将带有 `rgb/rgba/hsl/hsla/hex` 的颜色转换为 rbga 并一起比较。 - （Alpha 功能：查找代码未引用的类）：`css-checker -unused` #### 按路径运行 - `css-checker -path=YOUR_PROJECT_PATH` #### 忽略文件 - CSS-Checker 默认忽略 `.gitignore` 中的路径（可以使用 `-unrestricted=true` 来禁用此功能以读取所有文件）。 - 您可以使用：`-ignores=node_modules,packages`来添加要忽略的额外路径。 #### 配置文件 - `css-checker.yaml`：CSS-Checker 会在您的项目路径中读取此 yaml 文件进行设置，您可以使用 `Basic Commands` 中的部分参数来设置此文件（不用带前导“-”）。 - 此项目中还提供了一个名为“css-checker.example.yaml”的示例 yaml 文件，您可以将其命名为“css-checker.yaml”使用。 - 您可以使用 `-config=YOUR_CONFIG_FILE_PATH`来指定您的配置文件。 #### 高级功能 - 仅检查 styled components (忽略 CSS 文件): `css-checker -css=false -styled` - 查找代码未引用的类：`css-checker -unused` (Alpha) #### 基本命令 - `colors`: 是否检查颜色（默认为 true） - `css`: 是否检查 CSS 文件 (默认 true) - `config`:设置配置文件路径 (string, default './css-checker.yaml') (string, default '') - `ignores`: 输出被忽略的路径和文件(e.g. node_modules,\*.example.css) - `length-threshold`: 被视为长脚本行的单个样式值（不包括键）的最小长度（默认 20） - `long-line`: 是否检查重复的长脚本行（默认为 true） - `path`: 文件路径的字符串，默认为当前文件夹（默认为"."） - `sections`: 是否检查部分重复（默认为 true） - `sim`: 是否检查相似的 css classes（默认 true） - `sim-threshold`：相似性检查的阈值（$\geq20%$ && $\lt100%$）（int 类型，如 80 表示 80%，请注意此为相似性检查控制，完全相同的 css classes 检查由 `sections`控制）（默认为 80） - `styled`: 是否检查 Styled Components (默认 false) - `unrestricted`：搜索所有文件（gitignore） - `unused`：是否检查未使用的 classes（Beta） - `version`：打印当前版本并退出 #### 输出: ![image.png](https://assets.ruilisi.com/t=yDNXWrmyg+V6mUzCAG7A==) #### 我们是如何获取 classes 之间的相似性的？ 0. hash classes 中的每一行（比如代码中的`section`),生成 map ：`LineHash -> Section`. 1. 转换 map `LineHash -> Section` => `[SectionIndex1][SectionIndex2] -> Duplicated Hashes`, n 代表相同的哈希，section 代表 CSS classes 。 2. 在 map 中: `[SectionIndex1][SectionIndex2]` -> `Duplicated Hashes`, 重复的哈希数表示在 classes 之间的重复行。 #### 相似性检查 检查 classes 之间的相似性 ($\geq(sim-threshold)$ && $\lt100$)，该功能会标注相似`classes`之前的 diff (默认开启)。 - $sim-threshold$：使用 `-sim-threshold=` 参数或在配置 yaml 文件中设置 `sim-threshold:`，默认 80，最少 20。 ![image.png](https://assets.ruilisi.com/bzljM=P4Mz+dmtHKNvdHtg==) #### 重复的 CSS Classes 类似于 `Similarity Check` 但仅检查完全相同的 classes 较相似性检查效率更高 (默认开启)。 #### 长脚本行检查 将长脚本保存为多种脚本能让您的代码更简洁。只有当长脚本使用超过一次时才会发出警报 (默认开启)。 ![image.png](https://assets.ruilisi.com/5bdqZTuLTzJCaGSynA7+2w==) #### 颜色检查 - 检查 HEX/RGB/RGBA/HSL/HSLA 在代码中使用不止一次的颜色。您可以将其存为`CSS`变量, 以方便在未来可能的颜色及主题更新 (默认开启)。 ![image.png](https://assets.ruilisi.com/iqmnGQHwglb+pxE3kr3L1Q==) ## 构建&释放 - `make test-models` - `make build` - `make release` ## 作者 - [Xiemala Team](https://xiemala.com)。 它有助于为该项目中的开发人员删除数百个类似的 CSS classes。