#180 Finding Unused CSS

任何媒体或大型网站或许都有大量通过一个或多个样式表扩散的CSS，可能有些样式表里的选择器在网站的任何页面中都用不到。这些选择器应该删掉，但是很少这样做，它们在网站上某些地方还是会被使用，这样总是会有小小的风险。幸运的是存在一些有用的工具，用来搜索网站并找到任何没有用的CSS,我们在这一集里来看一下这些工具。

Dust-Me Selectors

我们首先要看的解决方案是一个叫做Dust-Me Selectors的Firefox的插件。安装后，我们访问一个页面，点击那个底部状态栏的粉红色刷子，Dust-Me Selectors会扫描页面的样式表，然后弹出一个报告，显示页面上没有用的选择器。

当然可能有一些像匹配它们的元素那样标记为无用的CSS选择器在其他页面上。让这些Dust-Me Selectors有一个可以获得sitemap文件的URL的Spider Log标签页。Dust Me Selectors会就那些网站地图里任何页面都没有找到的选择器提出报告，网站地图会给我们一个精确的关于哪些CSS选择器在网站上没有用到的报告。

Deadweight

Dust-Me Selectors是一个很好的找网站上无用CSS选择器的解决方案，但是如果我们再找一个能跟Ruby on Rails更紧密集成在一起的解决方案，并且我们能在脚本上有更多控制。一个叫做Deadweight的gem来了。它有正是我们想要的功能，搜索一个rails应用的CSS中的无用选择器，并用ruby代码来指定解析哪些页面和样式表。

要安装这个gem我们首先确保Github在我们的sources列表中。如果不再我们可以这样加上它

gem sources -a http://gems.github.com

加上后我们就可以安装gem了

sudo gem install aanand-deadweight

创建rake任务

通常运行Deadweight是用rake任务的方式，所以我们在我们应用的/lib/tasks目录下创建一个deadweight.rake文件。

在文件的头部我们需要require Deadweight gem。在rake任务里require gems的时候要小心。如果我们没有安装哪个gem，会在生产服务器上显示，然后每个rake任务都会中断。为了防止这样我们可以在一个begin/rescue块中包含require声明。

begin
  require 'deadweight'
rescue LoadError
end

现在我们可以写这个任务的剩余部分。

desc "run Deadweight (requires script/server)"
task :deadweight do
  dw = Deadweight.new
  dw.stylesheets = ['/stylesheets/application.css']
  dw.pages = ['/']
  puts dw.run
end

我们开始先添加一个任务描述，然后创建任务本身。这样就创建了一个Deadweight的新实例，然后指定要解析的样式表和页面的全路径。最后我们输出Deadweight运行的结果。

注意描述中我们需要启动script/server来运行我们的rake任务。服务器运行了就可以试验我们的任务了。

$ rake deadweight
(in /Users/eifion/rails/asciicasts)
/stylesheets/application.css
/
  html
  body
  h1
  ...
found 31 unused selectors out of 60 total
h2 a
code
pre
form.searchForm input[type=text]
form.searchForm input[type=submit]
...

上面的输出（截断）显示了一个页面上匹配的选择器列表，接着是没有匹配到的列表。上面列表中有31个没用到的选择器，但是我们只检查首页匹配的选择器，所以我们要添加应用中更多的页面到Deadweight搜索数组中。制定哪些页面应该被搜索的一种方法是用rake routes来看应用的路由表。

要更准确的知道我们的样式表中无用的选择器，我们要添加网站中的一些页面到页面数组中。这不是一个完整列表，但是足够覆盖网站的大部分了。

dw.pages = ['/', '/episodes/all', '/about', '/episodes/150-rails-metal', '/episodes/155-beginning-with-cucumber', '/search/index']

如果我们再次运行rake deadweight，它将运行我们提供的那些页面，我们会看到一个短一点的不匹配选择器列表。（这儿这个列表还是被缩短了。）

$ rake deadweight
(in /Users/eifion/rails/asciicasts)
/stylesheets/application.css
/
  html
  body
  h1
  ...
/episodes/all
  dl#episodeArchive dt
  dl#episodeArchive dd
/about
/episodes/150-rails-metal
  h2 a
  code
  pre
  ...
/search/index
found 10 unused selectors out of 60 total
form.searchForm input[type=text]
form.searchForm input[type=submit]
code.terminal
...

如果有选择器我们知道在网站上用到，但是只在某种环境下显示，比如用来显示错误消息或flash提醒的选择器，我们可以用ignore_selectors来从结果中排除它们。

dw.ignore_selectors = /flash_notice|flash_error|errorExplanation|fieldWithErrors/

当我们现在运行rake deadweight的时候，它将返回一个更短的不匹配选择器列表。我们现在足够可以手工去做并删除那些我们知道无用的。 对于那些我们不确定的我们可以用TextMate的Find In Project选项（或你喜欢的编辑器提供的类似功能）。去搜索网站看看是不是有匹配。

这一集就到这儿。我们涵盖了Deadweight的大部分基本特性，但是还有一些高级设置值得去看一看。在Deadweight’s GitHub page有详细类容。