在两个或多个 CSS 文件之间删除冗余的 CSS 属性

Question

3

我有两个CSS文件，它们之间设置了冗余的CSS属性。

例如，在foo.css中：

#test {
    border: 0;
    font-size: 16px;
}

在 bar.css 中：

#test {
    border: 0;
    font-size: 32px;
    width: auto;
}

通过这个，我想从 bar.css 中移除 border: 0;。

我本来期望在已有的问题中轻松找到答案，但是我就是找不到任何东西。一定有一些快速工具可以处理两个或更多的文件吧？

- TMC

打开Notepad++中的两个文件并比较它们（手动方式）。 - xkeshav

将同一对象的不同属性放在不同文件中并不好。你应该把所有属性都移到一个文件中，而不是删除边框。 - ariel

diEcho：我甚至有Beyond Compare，但是我正在寻找比手动更自动化的方式。 - TMC

Arial：我正在使用CSS媒体查询来添加额外的样式以适应移动设备，这就是为什么它被分成了两个文件的原因。 - TMC

@TMC：您可以在单个CSS文件中使用CSS媒体查询（http://css-tricks.com/css-media-queries/），这将是一项较小的优化。 - Marcel

@Marcel：谢谢你的提示，但即使我这样做了，我仍然需要先解决重复样式的问题。 - TMC

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Answer 1

Firefox有一个名为Dust-Me Selectors的插件，它可以扫描页面上的样式表，并列出已使用和未使用的样式。

这对于检测哪些样式可以安全地去除很有用。（尽管您仍然需要投入一些智慧，因为可能会出现一些显示为未使用但实际上是动态使用的样式等）

- Despertaweb · Answer 2

Chrome的扩展！

希望这对你有用

- 李嘉伟 · Answer 3

它可以自动检测相似的CSS类，并显示它们之间的差异。它还可以解析您的HTML或js文件，并查找未使用的CSS类。

go install github.com/ruilisi/css-checker@latest

（使用 go 版本 1.17 之前，请使用 go get github.com/ruilisi/css-checker 命令）。或者从 releases 下载。

npm install -g css-checker-kit

css-checker