如何在大型网站中有效清理样式？

Question

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

该网站是用PHP/Smarty编写的; 有超过300个智能模板,整个网站包含1000多个不同的页面(读取 - 唯一的URL).我相信它会继续增长 - CSS文件也是如此.

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

更新:不幸的是,我放入URL的在线解析器对我来说不起作用,因为75%的站点是用户名/密码登录的后面 - 并且根据登录,有六个不同的角色,每个角色都有他们的自己的一组页面.还有交易元素(在线商店),其中页面显示在(例如)信用卡支付被采取/处理之后.我怀疑任何在线工具都能够处理任何这些.因此,如果有工具,则必须在源树上工作.

Answer 1

如果没有通过每个.tpl文件并手动搜索文件中的选择器,我没有看到任何其他方式.

你当然可以使用Dust-Me选择器,但你仍然必须浏览每个使用.tpl文件的页面(不是每个url,因为我知道它们中的许多都是重复的).

听起来像个大工作!之前我曾经做过一次这样做,我确实这样做了,花了我一个星期.

另一个工具是名为CSS Usage的Firebug插件.据我所知,它可以在多个页面上工作,但如果在站点范围内使用,可能会中断.搏一搏.

胜利!查看Unused CSS在线工具.在字段中键入你的索引网址,瞧,几分钟后所有使用的选择器的列表:)我知道你想要未使用的选择器,但是唯一的工作就是找到文件中未使用的那些(ctrl + f)和删除它们:)

请务必使用第二个选项,他们会通过电子邮件向您发送整个网页抓取的结果.可能需要半个小时,但这远远好于一周.喝点咖啡:)

刚刚测试过,效果很好:)

Answer 2

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

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

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

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

关键点是：

1. 力求在整个站点上保持一致。换句话说，不要以为最终站点看起来与原始站点完全相同，而是要使其在页面之间看起来与自身（统一）相同
2. 首先处理明显的样式（标签/按钮/段落字体/标题），然后再担心较小的样式或稍后的独特样式

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