2008-11-12 115 views
23

我已经接管了一家由另一家公司开发的相当复杂的网站,坦率地说这是一团糟。我的问题之一是,在编写html时似乎没有任何规范,所以虽然他们广泛使用了css,但有六个css文件,粗略的分析显示css文件中有大量的样式没有被任何html引用 - 而是包含错误的重新设计开始和旧的,现在多余的样式,与当前项目混合。CSS清洁器

我真的很想清理所有这些,然后再继续。是否有任何工具,开源或其他,可以采取一堆html和css文件,并交叉引用它们,以突出在css中的cruft?

回答

21

尝试使用Firefox的Dust me Selectors插件。

+0

我建的java代码一个小一点的是需要从尘埃我输出的CSV,并从指定的样式表中删除这些样式,并输出一个干净的css文件。这里:https://github.com/willwarren/cssclean – Will 2013-02-27 03:38:42

2

尘埃我选择几乎是我的jquery css cleaner有相同的功能。

它看上去很不错

,如果你没有Firefox中你可以使用我的插件。

2

我相信有!我一直在使用它。事实上,有2个,我将与你分享他们。

  1. 如果你想在网上免费自动标记生成CSS,那么你就需要这样的: http://beecss.theextremewebdesigns.com/

  2. 如果你已经有了(乱)CSS &你想清除/再压缩它免费在线,那么你就需要这样的: http://beecss.theextremewebdesigns.com/css_clean_css_minify/

我喜欢上面的工具,因为我已经评估的其他清洁剂在那里&我发现其他人在某些方面缺乏功能。例如,一些清洁工完全忽略了多个班级,或者只是抓住第一堂课。他们忘记了以下课程将覆盖第一类的风格,因此首先要让所有选择器&生成&是非常重要的。我发现只有BeeCSS - CSS Generator可以在这里做出令人敬畏的工作!从那时起,我已将BeeCSS CSS Generator & BeeCSS Cleaner Minifier &加入到我的所有项目中。我强烈推荐他们两个。

我的经验,我有这个解决方案给你。

  1. 你的HTML简单地复制到一个新的HTML页面&保存。然后上传这个HTML页面在http://beecss.theextremewebdesigns.com/。这将只给你在文档中实际使用的选择器&类。所以如果他们在CSS文件中有多余的样式,你可以通过这种方式轻松摆脱它们。

  2. 然后,只需搜索类别& BeeCSS在原始CSS文件&中生成的选择器将这些样式复制到由BeeCSS生成的新CSS。这样,您将确保您的CSS现在只有HTML文档正在使用的样式。

  3. 在完成上述步骤中粘贴的&粘贴后,您会发现样式在CSS中的外观可能会很混乱。不要开始手动清理它们。我的意思是,不要试图修复制表符,空格等等。只需将所有样式复制到BeeCSS - 清洁缩小器中,然后点击“清洁CSS”按钮,即http://beecss.theextremewebdesigns.com/css_clean_css_minify/ &。这应该给你最终的结果。它将只包含在HTML文档中实际使用的选择器&类。如果你想减小CSS的尺寸,只需在BeeCSS Cleaner Miniifer &中拷贝样式,点击“Minify CSS”按钮,就可以生成缩小版本的“New”css。

以上是当我在我的项目&的工作,我按照他们的工作绝对是非常适合我的步骤。 BeeCSS的真棒在于,事实上,两个CSS发电机&清洁Minifier完全免费&易于使用&您可以在几秒钟内在线生成/清理CSS。您不需要安装任何扩展程序,应用程序等。因此,您将不会用笨拙的扩展程序加载浏览器,也不需要等待数小时才能完成此过程。如果你遵循我的指示,你会在几秒钟内完成(除了款式复制部分)

希望有所帮助。

0

在sourceforge上有一个新的CSS扫描仪。它搜索你的css,html,aspx,php,javascript和jquery代码,以查看已使用和未使用的css/stylesheet选择器和类。这可能正是你想要的。它在Windows下运行(因为它是.net代码)。 这是它的URL,如果你想看看: http://sourceforge.net/projects/cssscanner/