如何有效地清理大型网站中的样式？答案

【问题标题】：How can I effectively clean up styles in a large web site?如何有效地清理大型网站中的样式？
【发布时间】：2011-12-28 12:50:53
【问题描述】：

在过去五年的大部分时间里，我们的网站一直在不断发展。碰巧的是，网站的几乎所有样式都在一个大 CSS 文件中。随着时间的推移，这个 css 文件已经增长到大约 9,000 行 - 我确信其中一些样式不再使用，并且相当多的样式提供了重复的功能。

网站是用 PHP/Smarty 编写的；有 300 多个 smarty 模板，整个站点包含 1000 多个不同的页面（读取 - 唯一 URL）。我确信它会继续增长 - CSS 文件也会如此。

清理此文件的最佳方法是什么？

更新：不幸的是，我输入 URL 的在线解析器对我不起作用，因为 75% 的网站都在用户名/密码登录之后 - 根据登录情况，有一半十几个不同的角色，每个角色都有自己的一组页面。还有交易元素（在线商店），页面显示在（例如）信用卡付款被采取/处理之后。我怀疑任何在线工具都能够处理其中的任何一个。因此，如果有一个工具，它就必须在源代码树上工作。

【问题讨论】：

你有 1000 个独特的 URL，这绝对是一种恶臭
@Montagist 你见过非常大的网站吗？我研究过一个拥有超过 100,000 个唯一 URL 的网站，每天有近一百万的访问者。大量的 URL 没有错，这完全取决于您支持的功能。
那么亚马逊最好开始减少他们的网址。

标签： css

【解决方案1】：

没有遍历每个 .tpl 文件并手动在文件中搜索选择器，我没有看到任何其他方式。

您当然可以使用Dust-Me selectors，但您仍然必须浏览使用 .tpl 文件的每个页面（不是每个 url，因为我知道其中很多都是重复的）。

听起来像是一项艰巨的工作！我以前必须这样做一次，我确实这样做了，花了我一周的时间。

另一个工具是名为CSS Usage 的Firebug 插件。据我阅读它可以在多个页面上工作，但如果在站点范围内使用可能会中断。试一试。

胜利！查看Unused CSS online tool。在字段中输入您的索引 url，瞧，几分钟后所有使用的选择器的列表 :) 我知道您想要未使用的选择器，但唯一的工作是在文件中找到未使用的选择器 (ctrl+f) 和删除它们:)

确保使用 2nd 选项，他们会将整个网页的抓取结果通过电子邮件发送给您。可能需要半个小时，但这比一周要好得多。喝点咖啡:)

刚刚测试过，效果不错:)

【讨论】：

遗憾的是，我曾经以同样的方式这样做过——如果你真的想要进行完美的清理，这该死的时间。取页面的一部分并清理所有子文件夹 - 休息一下 - 重复 :)
哎呀，它也在使用 smarty ......更多哎呀。我会尽快重做整个网站，而不是尝试清理哈。（是的，我知道在这种情况下可能不现实）
编辑了答案，找到了你需要的东西:)
:D 没关系，它时常发生在我身上。是的，它确实像一种享受！ +1 用于查找 大多数 解决方案 lol
不幸的是，我输入 URL 的在线解析器对我不起作用，因为 75% 的网站都在用户名/密码登录之后 - 并且根据登录，有六个不同的角色，每个都有自己的一组页面。还有交易元素（在线商店），页面显示在（例如）信用卡付款被采取/处理之后。我怀疑任何在线工具都能够处理其中的任何一个。因此，如果有一个工具，它就必须在源代码树上工作。

【解决方案2】：

大约 3 年前，我不得不在一个相当大的经典 ASP Web 应用程序上执行此操作。

我采用的方法是，每个页面上只有有限数量的样式项目，并从识别这些项目开始。例如，我浏览了主页，发现大多数标签都是粗体和深蓝色，并且所有按钮的宽度都相同（例如）。

完成此操作后，我与团队进行了交谈，我们决定任何不符合这些规则的内容我已确定应该符合，因此我基于此编写了一个样式表假设。

我们最终将大约 30 种样式应用于数百页。后来进行了几次正则表达式查找和替换（我们很幸运，最初的开发使用了结构合理的 HTML），我们有了一些可用的东西，只需要进行奇怪的调整。

重点是：

力求整个网站的统一。换句话说，不要假设生成的网站看起来与原始网站完全相同，而是希望它在页面之间看起来与自身相同（统一）
先处理明显的样式（标签/按钮/段落字体/标题），然后再考虑较小的样式或独特的样式

您可能还会发现在单独的文件中保留独特的样式（例如，具有独特元素的仪表板页面不会出现在其他地方）以减小文件的大小。显然，这是否有帮助取决于您的网站。

【讨论】：

我认为这将是最好的方法，考虑到情况。当然，现在对 css 的许多特殊调整是由支持 IE 6 及更高版本的要求引起的……看看它会如何排序会很有趣。主要挑战在于网站的庞大规模（目前样式表中有超过 1000 个页面、7 个用户角色、超过 10,000 种样式）。

【解决方案3】：

此外，还有许多网站会为您搜索这些内容。像这个：http://unused-css.com/ 我不知道他们如何衡量 Dust-Me 选择器，但我知道 Dust-Me 选择器与 Firefox 8.0 不兼容。

【讨论】：

不幸的是，我输入 URL 的在线解析器对我不起作用，因为 75% 的网站都在用户名/密码登录之后 - 并且根据登录，有六个不同的角色，每个都有自己的一组页面。还有交易元素（在线商店），页面显示在（例如）信用卡付款被采取/处理之后。我怀疑任何在线工具都能够处理其中的任何一个。因此，如果有一个工具，它必须在源代码树上工作。
我会看看Dust-Me（虽然我有FF8，所以需要看看有什么交易）
@AleksG：关于 FF8 的不兼容性：解压插件并更改其中的 FF 版本号可能会起作用

【解决方案4】：

您可以使用 FireFox 的 Dust-Me Selectors 插件来查找未使用的样式：

http://www.sitepoint.com/dustmeselectors/

如果您有站点地图，您可以使用它让插件抓取您的站点：

蜘蛛对话框具有执行站点范围蜘蛛操作的所有控件。输入站点地图 XML 文件或 HTML 站点地图的 URL，程序将读取该文件并提取其所有链接。然后它将依次加载这些页面中的每一个，并对每个页面执行累积查找操作。

【讨论】：

不幸的是，我输入 URL 的地方的蜘蛛解析对我不起作用，因为 75% 的站点都在用户名/密码登录之后 - 并且根据登录，有六个不同的角色，每个都有自己的一组页面。还有交易元素（在线商店），页面显示在（例如）信用卡付款被采取/处理之后。我怀疑任何在线工具都能够处理其中的任何一个。因此，如果有一个工具，它必须在源代码树上工作。
@Aleks G：如果是这样的话，我祝你在清理 CSS 时一切顺利！恐怕这将是一项巨大的工作。 :-)

【解决方案5】：

我发现还没有一个好的答案。我已经尝试过“未使用的 CSS 在线工具”，似乎在公共网站上工作正常。问题是如果您有一个 CSS 来显示您的公共网站 + 一个内部网（例如：wordpress 网站 + 注册用户的登录）。 Intranet 页面将不会被跟踪，您将丢失您的 css 样式。

我的下一个尝试将是使用 gulp + uncss： https://github.com/ben-eb/gulp-uncss

您必须定义您网站的所有 url（外部和内部）和（也许；不确定）如果您在浏览器上使用用户 + 密码运行该网站，gulp+uncss 可以进入内部 url。

更新：我看到未使用的css在线工具有登录解决方案！

【讨论】：

我已经尝试过未使用的 CSS 和 gulp 解决方案 - 似乎没有一个可以完成这项工作。无法生成完整的 url 列表 - 它有数十万 - 它们是从数据库中的内容动态生成的。根据登录的用户，还有多个角色 - 每个角色都有不同的附加页面集。最后，我怀疑在线商店页面在付款后可以做任何事情（除了源代码解析）（例如，付款进行中、付款确认、购买收据、订单历史记录等）