Javascript 重构大型/旧CSS文件

我目前在一个10万页的网站上工作，目前的设计已经实施了5年多，连续更新产生了4个12000多行CSS文件

显然，CSS已经变得笨拙，许多样式都是重复的，几乎不可能知道实际使用了多少样式

我们可以缩小规模，但这并不是真正解决问题，只是推迟了不可避免的重新工作

所以有三个问题是，有没有什么工具可以用来

• 消除大型CSS文件的重复
• 扫描站点并记录CSS类和ID的使用情况
• 这样的扫描可以通过某种脚本来实现吗，也许是Greasemonkey

---

如果您使用的是Visual Studio，扩展有助于自动合并css类。

完成了一些您要求的操作，他们有以下几点要说：-

已经编写了一个windows应用程序来查找和删除未使用的CSS类。我还没有测试过它，但是根据描述，您必须提供html文件的路径和一个CSS文件。然后程序将列出未使用的CSS选择器。从屏幕截图上看，似乎无法导出此列表或下载新的干净CSS文件。看起来该服务仅限于一个CSS文件。如果要清理多个文件，则必须逐个清理

是一个Firefox扩展（适用于v1.5或更高版本），用于查找未使用的CSS选择器。它从您正在查看的页面上的所有样式表中提取所有选择器，然后分析该页面以查看哪些选择器未被使用。然后存储数据，以便在测试后续页面时，遇到选择器时可以将其从列表中删除。这个工具应该能够蜘蛛整个网站，但不幸的是，我可以让它工作。此外，我不相信您可以配置和下载删除样式的CSS文件

是一个php脚本，它使用正则表达式检查一个页面的样式。它将告诉您HTML代码中不可用的类。我还没有测试这个解决方案

是一个CSS覆盖工具。给定一组样式表和一组URL，它确定实际使用的选择器以及可以“安全”删除的列表。此工具是一个ruby模块，仅适用于rails网站。必须手动从CSS文件中删除未使用的选择器

CSS是一种javascript工具，用于在网站的多个页面上发现未使用的CSS。首先必须将javascript文件安装到要测试的页面。然后，您必须调用氦函数来开始清洗

UnusedCSS.com是一个具有易于使用界面的web应用程序。键入一个站点的url，您将得到一个CSS选择器列表。对于每个选择器，一个数字指示选择器的使用次数。这项服务有一些限制。不支持@import语句。您无法配置和下载新的干净CSS文件

---

是一个bookmarklet，可以帮助您在任何站点上查找未使用的CSS选择器。这个工具非常容易使用，但它不允许您配置和下载干净的CSS文件。它只会列出未使用的CSS文件。

你肯定可以用某种脚本扫描你的网站。您可以扫描HTML以确定使用的每个ID和类，这样就可以从CSS文件中删除未使用的内容。您完全可以用不太多的编程来消除CSS中的重复数据。但这是一个大型网站，有大量的CSS文件，而且这将是一项庞大的工作，即使使用工具来简化某些流程，这一事实也无法避免。祝你好运。：-）100000页具有不同的CSS，还是一个CSS文件对应100000页具有相同布局？这种方法实际上取决于文件的结构。看看这个相关的问题：你是如何达到100000页的？即使是像facebook这样最复杂的网站，也会使用500页的页面。@事实上，几年前我在一家大型媒体网站工作。他们有一个新闻台，每天出版不同类别的多篇文章，为他们制作的每个电视节目制作页面。他们的CMS将构建静态HTML以便于缓存。当他们迁移到一个新的CMS时，他们需要为他们在过去12年的web发布中使用的每种页面格式构建导入过滤器。该网站也有超过15万页。相信我，如果你是一个真正的内容提供商，并且在现代最佳实践出现之前就开始构建内容，这并不难。虽然理论上你可以用Greasemonkey脚本来实现这一点，但这不是一个明智的选择。这就像用螺丝刀敲钉子一样。通用汽车将面临各种障碍，以缓慢的速度处理一切。答案、评论和相关问题有更好的方法。真的吗？我以为它只是使。更少的文件使用CSS语法突出显示规则。我正在使用它重构我的CSS类。这对我来说是一个很棒的工具。