对于一些 Web 开发项目，我开始使用一些外部前端框架。我不是一个好的设计师，所以它们非常有用，但我从不利用它们的一半功能。
因此，为了节省我的CSS文件的空间，我正在寻找一种能够理解我的 DOM 架构和我的CSS文件的工具，然后删除所有无用的声明。
- 我不在乎它是 Web 应用程序、IDE 或浏览器插件，还是 Linux/Windows 桌面应用程序。
- 输入：.html文件（但如果您有其他我感兴趣的建议）
删除未使用的 CSS 的工具
软件推荐
Web开发
html
css
2021-10-15 00:55:22
4个回答
不得不说，我觉得这个选项比我原来的推荐要好；我最初的建议非常适合快速查看，这更适合制作发布包。
UnCSS，特别是我提出建议的依据是UnCSS 的 Grunt 包装器；它当然集成到Grunt构建系统中以实现高度自动化。
有相当多的自定义选项（也详细列出），它支持本地和远程 css 文件作为源。
如果在Grunt中使用，我建议将它与grunt-processhtml一起使用，以自动使您的页面引用新的连接和清理的 css 文件。
我如何使用它：（我的 gruntfile.js 的一个片段）
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
main: {
options: {
report: 'gzip'
},
files: {
'<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
}
}
},
processhtml: {
main : {
options: {
strip: false
},
files: [{
expand: true,
cwd: '',
src: '<%= src_files_html %>',
dest: '<%= grunt.option("outpath") %>'
}]
}
}
然后在我的html文件中我有这个：
<!-- build:css ./css/cleaned.min.css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link href="./css/style.css" rel="stylesheet">
<!-- /build -->
转换为：
<link rel="stylesheet" href="./css/cleaned.min.css">
并且 CSS更小，性能和移动带宽更好。
我有一个很好的选择——至少我非常喜欢它——尽管它既不是网络应用程序也不是 Linux 应用程序。
我推荐 Firefox 插件CSS 使用- 它确实需要Firefox和 Firefox 插件Firebug。
用法：
- 只需加载页面（通过网络，本地主机（如我的图片）甚至只是文件系统，
- 打开 firebug 控制台并单击 css 使用选项卡
- 点击
SCAN - 回顾一下，如果你想导出清理过的 css（只能从文件系统可靠地工作——尽管这应该是对插件的一个小修复——我可能会在某个时候这样做）。
不幸的是，导出的清洁 css 有一些烦恼；删除了一些规则（好），但有些规则的前缀UNUSED.应该是 IMO 也应该有一个选项来删除这些规则，但目前我不相信有（至少如果是这样的话，我从来没有找到它）。
作为一种解决方法，我一直在做的只是复制并粘贴到 Notepad++ 并使用搜索和替换这个正则表达式作为搜索字符串：（UNUSED\..*?\}和 select . matches newlines）和一个空白替换来摆脱它们。- 在您(?s)UNUSED\..*?\}用作正则表达式的 Sublime 中做同样的事情。大多数其他优秀的文本编辑器应该具有类似的功能。
我已经制作了这个基于浏览器的在线未使用的 CSS 移除工具。
特征：
- 基于浏览器。没有什么要安装的。
- 针对多个 url 检查 CSS。
- 提供用于手动选择/取消选择 CSS 文件中的项目的选项。
- 可以下载并在您的本地主机上运行以获得无限的 URL
- 开源代码
免责声明：我是代码的作者。
IntelliJ IDEA具有一些强大的 Web 开发功能：
- 适用于 Windows/Mac/Linux
- 发现未使用的 CSS 类定义
不过，您需要拥有 Ultimate Edition 才能访问 Web 开发功能（如果您是项目负责人或开源项目中的常规提交者，则免费）。