重构大型/旧 CSS 文件答案

【问题标题】：Refactoring large/old CSS files重构大型/旧 CSS 文件
【发布时间】：2012-03-16 06:33:34
【问题描述】：

我目前正在开发一个 100,000 页的网站，目前的设计已经实施了 5 年多，并且连续更新产生了四个 12,000 多行的 CSS 文件。

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

我们可以缩小，但这并不能真正解决问题，只是延迟了不可避免的返工。

那么三个问题，是否有任何工具可供...

对大型 CSS 文件进行重复数据删除？
扫描站点并记录 CSS 类和 ID 的使用？
这样的扫描可以通过某种脚本实现吗，Greasemonkey 可能吗？

【问题讨论】：

您绝对可以使用某种脚本扫描您的网站。您可以扫描您的 HTML 以确定使用的每个 ID 和 CLASS，以便您可以从 CSS 文件中删除未使用的内容。你绝对可以用很少的编程来删除你的 CSS 重复数据。但这是一个大型站点，具有大型 CSS 文件，并且无法避免这将是一项大型工作，即使使用简化某些流程的工具也是如此。祝你好运。 :-)
100000 个不同 CSS 的页面，还是一个 CSS 文件用于 100,000 个具有相同布局的页面？该方法实际上取决于您的文件的结构。请参阅此相关问题：stackoverflow.com/questions/6650146/css-find-unused-css
您是如何达到 100,000 页的？即使是像 facebook 这样最复杂的网站也使用 500 页 TOPS。
@Truth，几年前我在一家大型媒体网站工作。他们有一个新闻台，每天发布多篇不同类别的文章，以及他们制作的每个电视节目的页面。他们的 CMS 将构建静态 HTML 以便于缓存。当他们迁移到新的 CMS 时，他们需要为在过去 12 年的网络发布中使用的每种页面格式构建导入过滤器。该网站也有超过 15 万页。相信我，如果您是真正的内容提供者并在现代最佳实践出现之前就开始构建内容，这并不难。
虽然理论上你可以用 Greasemonkey 脚本做到这一点，但这并不明智。这就像试图用螺丝刀敲钉子一样。 GM 将面临各种障碍，并在慢速浏览器 JS 中处理所有内容。答案、cmets 和链接问题有更好的方法。

标签： javascript css regex

【解决方案1】：

http://unused-css.com/ 做了一些你问的事情，他们有这样的说法：-

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

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

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

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

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

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

CSSESS 是一个小书签，可帮助您在任何站点上查找未使用的 CSS 选择器。这个工具很容易使用，但它不会让你配置和下载干净的 CSS 文件。它只会列出未使用的 CSS 文件。

【讨论】：

【解决方案2】：

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

【讨论】：

真的吗？我以为它只是让 .less 文件使用 CSS 语法高亮规则。
我正在使用它来重构我的 css 类。这对我来说是一个很棒的工具。