Skip to content

README-zh_CN.md

Latest commit

 

History

History
139 lines (90 loc) · 5.69 KB

README-zh_CN.md

File metadata and controls

139 lines (90 loc) · 5.69 KB

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下载。

使用 npm:

npm install -g css-checker-kit

用法

运行

  • cd PROJECT_WITH_CSS_FILES 并且直接运行:
css-checker
  • (Beta: Styled Components 检查，如您使用 Styled Components，可开启): css-checker -styled

DEMO

（它可以检查 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

我们是如何获取 classes 之间的相似性的？

  1. hash classes 中的每一行（比如代码中的section),生成 map ：LineHash -> Section.
  2. 转换 map LineHash -> Section => [SectionIndex1][SectionIndex2] -> Duplicated Hashes, n 代表相同的哈希，section 代表 CSS classes 。
  3. 在 map 中: [SectionIndex1][SectionIndex2] -> Duplicated Hashes, 重复的哈希数表示在 classes 之间的重复行。

相似性检查

检查 classes 之间的相似性 ($\geq(sim-threshold)$ && $\lt100$)，该功能会标注相似classes之前的 diff (默认开启)。

  • $sim-threshold$：使用 -sim-threshold= 参数或在配置 yaml 文件中设置 sim-threshold:，默认 80，最少 20。

image.png

重复的 CSS Classes

类似于 Similarity Check 但仅检查完全相同的 classes 较相似性检查效率更高 (默认开启)。

长脚本行检查

将长脚本保存为多种脚本能让您的代码更简洁。只有当长脚本使用超过一次时才会发出警报 (默认开启)。

image.png

颜色检查

  • 检查 HEX/RGB/RGBA/HSL/HSLA 在代码中使用不止一次的颜色。您可以将其存为CSS变量, 以方便在未来可能的颜色及主题更新 (默认开启)。

image.png

构建&释放

  • make test-models
  • make build
  • make release

作者

  • Xiemala Team。 它有助于为该项目中的开发人员删除数百个类似的 CSS classes。