CSS-Profiler
CSS-Profiler is a PostCSS Cli tool to analysis CSS code quality, find its problems, and generate a report to guide developers write more clean, maintainable CSS code.
Features
- 找出样式名(即选择器)完全相同的样式
- 找到具有完全相同的内容的所有样式
- 找出样式内容相似度在 70% 及以上的样式规则
- 找出前 20 个名字最长的选择器
- 支持 sourceMap 分析
使用
命令行用法
目前只支持分析单个 CSS 文件。
# install $ npm i -g css-profiler # analysis one or more css files $ css-profile style.css# result will display below.
Node.js API
TODO
const cssProfiler = ; const cssContent = `input { display: inline-block;}input { border: 1px solid #eee; padding: .2rem; box-sizing: border-box; width: 100%; display: block;}button { background: aquamarine; border: none; margin-top: .2rem; display: block; width: 100%; box-sizing: border-box;}`; let result = ;
原理
可能造成代码重复的原因有:
- 写代码的时候发懒,复制了已有代码
- 对
scoped
机制的使用不恰当 - 构建过程出现了问题
- 使用预/后处理器时,重复引入某个 css 源文件