{"id":13432640,"url":"https://github.com/ruilisi/css-checker","last_synced_at":"2025-06-16T22:37:06.401Z","repository":{"id":37592846,"uuid":"462083250","full_name":"ruilisi/css-checker","owner":"ruilisi","description":"Reduce Similar \u0026 Duplicated CSS Classes with Diff in Seconds!","archived":false,"fork":false,"pushed_at":"2022-11-15T08:20:25.000Z","size":98,"stargazers_count":581,"open_issues_count":4,"forks_count":14,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-02-20T08:49:18.481Z","etag":null,"topics":["cicd","code-quality","css","redundancy-analysis"],"latest_commit_sha":null,"homepage":"https://xiemala.com/s/gaSXqA","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruilisi.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-22T00:49:45.000Z","updated_at":"2025-02-10T02:59:50.000Z","dependencies_parsed_at":"2023-01-20T21:15:33.389Z","dependency_job_id":null,"html_url":"https://github.com/ruilisi/css-checker","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruilisi%2Fcss-checker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruilisi%2Fcss-checker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruilisi%2Fcss-checker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruilisi%2Fcss-checker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruilisi","download_url":"https://codeload.github.com/ruilisi/css-checker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244016792,"owners_count":20384205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cicd","code-quality","css","redundancy-analysis"],"created_at":"2024-07-31T02:01:14.550Z","updated_at":"2025-03-17T10:32:22.801Z","avatar_url":"https://github.com/ruilisi.png","language":"Go","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ruilisi.com/\"\u003e\n    \u003cimg alt=\"CSS-CHECKER\" src=\"https://assets.ruilisi.com/cgULF9oHro3e1kSHXTfZYA==\" width=\"211\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eCss Checker - 让CSS小而美\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://drone.ruilisi.com/ruilisi/css-checker\" title=\"Build Status\"\u003e\n    \u003cimg src=\"https://drone.ruilisi.com/api/badges/ruilisi/css-checker/status.svg?ref=refs/heads/master\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"README.md\"\u003eEnglish Version\u003c/a\u003e\n\u003c/p\u003e\n\n## 目标\n\n`css-checker` 会检查您的 css 样式是否有重复，并在几秒钟内找到具有高度相似性的 `css classes` 之间的差异。它旨在避免文件之间出现冗余或`相似的 css`和`样式化的组件`，并适用于本地开发和 CI 等自动化。\n\n它默认支持代码的相似性检查、重复检查、颜色检查以及长行警告。您可以为未使用的 CSS 检查选择启用样式组件检查，CSS checker 还可以帮助开发人员在几秒钟内减少 CSS 的代码。\n\n\u003cp align=\"right\"\u003e\u003cem\u003e查看更多\u003ca href=\"https://xiemala.com/s/gaSXqA\"\u003eWiki\u003c/a\u003e\u003c/em\u003e\u003c/p\u003e\n\n## 安装\n\n#### 使用 go:\n\n```\ngo install github.com/ruilisi/css-checker@latest\n```\n\n(对于 go 1.17 之前的版本，请使用 `go get github.com/ruilisi/css-checker`)。或者从[releases](https://github.com/ruilisi/css-checker/releases)下载。\n\n#### 使用 npm:\n\n```\nnpm install -g css-checker-kit\n```\n\n## 用法\n\n#### 运行\n\n- `cd PROJECT_WITH_CSS_FILES` 并且直接运行:\n\n```\ncss-checker\n```\n\n- (Beta: Styled Components 检查，如您使用 Styled Components，可开启): `css-checker -styled`\n\n![DEMO](https://assets.ruilisi.com/css-checker-demo.gif)\n\n（它可以检查 classes 之间的相似性，并显示（\u003e=80%）相似度的 classes 之间的差异。默认情况下，他还能找出使用了多次的颜色、长脚本。可以用`css checker -help`来查看自定义选项。）\n\n- 它能将带有 `rgb/rgba/hsl/hsla/hex` 的颜色转换为 rbga 并一起比较。\n\n- （Alpha 功能：查找代码未引用的类）：`css-checker -unused`\n\n#### 按路径运行\n\n- `css-checker -path=YOUR_PROJECT_PATH`\n\n#### 忽略文件\n\n- CSS-Checker 默认忽略 `.gitignore` 中的路径（可以使用 `-unrestricted=true` 来禁用此功能以读取所有文件）。\n- 您可以使用：`-ignores=node_modules,packages`来添加要忽略的额外路径。\n\n#### 配置文件\n\n- `css-checker.yaml`：CSS-Checker 会在您的项目路径中读取此 yaml 文件进行设置，您可以使用 `Basic Commands` 中的部分参数来设置此文件（不用带前导“-”）。\n- 此项目中还提供了一个名为“css-checker.example.yaml”的示例 yaml 文件，您可以将其命名为“css-checker.yaml”使用。\n- 您可以使用 `-config=YOUR_CONFIG_FILE_PATH`来指定您的配置文件。\n\n#### 高级功能\n\n- 仅检查 styled components (忽略 CSS 文件): `css-checker -css=false -styled`\n- 查找代码未引用的类：`css-checker -unused` (Alpha)\n\n#### 基本命令\n\n- `colors`: 是否检查颜色（默认为 true）\n- `css`: 是否检查 CSS 文件 (默认 true)\n- `config`:设置配置文件路径 (string, default './css-checker.yaml') (string, default '')\n- `ignores`: 输出被忽略的路径和文件(e.g. node_modules,\\*.example.css)\n- `length-threshold`: 被视为长脚本行的单个样式值（不包括键）的最小长度（默认 20）\n- `long-line`: 是否检查重复的长脚本行（默认为 true）\n- `path`: 文件路径的字符串，默认为当前文件夹（默认为\".\"）\n- `sections`: 是否检查部分重复（默认为 true）\n- `sim`: 是否检查相似的 css classes（默认 true）\n- `sim-threshold`：相似性检查的阈值（$\\geq20%$ \u0026\u0026 $\\lt100%$）（int 类型，如 80 表示 80%，请注意此为相似性检查控制，完全相同的 css classes 检查由 `sections`控制）（默认为 80）\n- `styled`: 是否检查 Styled Components (默认 false)\n- `unrestricted`：搜索所有文件（gitignore）\n- `unused`：是否检查未使用的 classes（Beta）\n- `version`：打印当前版本并退出\n\n#### 输出:\n\n![image.png](https://assets.ruilisi.com/t=yDNXWrmyg+V6mUzCAG7A==)\n\n#### 我们是如何获取 classes 之间的相似性的？\n\n0. hash classes 中的每一行（比如代码中的`section`),生成 map ：`LineHash -\u003e Section`.\n1. 转换 map `LineHash -\u003e Section` =\u003e `[SectionIndex1][SectionIndex2] -\u003e Duplicated Hashes`, n 代表相同的哈希，section 代表 CSS classes 。\n2. 在 map 中: `[SectionIndex1][SectionIndex2]` -\u003e `Duplicated Hashes`, 重复的哈希数表示在 classes 之间的重复行。\n\n#### 相似性检查\n\n检查 classes 之间的相似性 ($\\geq(sim-threshold)$ \u0026\u0026 $\\lt100$)，该功能会标注相似`classes`之前的 diff (默认开启)。\n\n- $sim-threshold$：使用 `-sim-threshold=` 参数或在配置 yaml 文件中设置 `sim-threshold:`，默认 80，最少 20。\n\n![image.png](https://assets.ruilisi.com/bzljM=P4Mz+dmtHKNvdHtg==)\n\n#### 重复的 CSS Classes\n\n类似于 `Similarity Check` 但仅检查完全相同的 classes 较相似性检查效率更高 (默认开启)。\n\n#### 长脚本行检查\n\n将长脚本保存为多种脚本能让您的代码更简洁。只有当长脚本使用超过一次时才会发出警报 (默认开启)。\n\n![image.png](https://assets.ruilisi.com/5bdqZTuLTzJCaGSynA7+2w==)\n\n#### 颜色检查\n\n- 检查 HEX/RGB/RGBA/HSL/HSLA 在代码中使用不止一次的颜色。您可以将其存为`CSS`变量, 以方便在未来可能的颜色及主题更新 (默认开启)。\n\n![image.png](https://assets.ruilisi.com/iqmnGQHwglb+pxE3kr3L1Q==)\n\n## 构建\u0026释放\n\n- `make test-models`\n- `make build`\n- `make release`\n\n## 作者\n\n- [Xiemala Team](https://xiemala.com)。 它有助于为该项目中的开发人员删除数百个类似的 CSS classes。\n","funding_links":[],"categories":["Go","Reset and Normalize"],"sub_categories":["Editor's Draft :black_nib:"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruilisi%2Fcss-checker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruilisi%2Fcss-checker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruilisi%2Fcss-checker/lists"}