只提取在特定页面中使用的CSS
假设你有一个dynamic生成的网站，已经被太多的人过去和现在的工作，你现在有一个包含超过20000行CSS的共享样式表的集合。 它根本没有组织，有一些类和基于id的select器，但也有太多基于标签的select器。 然后说你有100个使用这些样式的模板，通过一些控制器。
有没有工具，像Firebug的工作，你可以指向一个url，它会确定该页面的所有适用的CSSselect器，并将其转储到一个文件？ 基本上可以通过一个页面的方式来拆分共享的样式表。
我之前使用过Dust-Meselect器，这是一个Firefox插件。 这是非常容易使用和多function的，因为它维护了一个使用CSS值的页面的组合列表。
缺点是我没有能够自动化它来蜘蛛整个网站，所以我最终使用它只是在我的网站的关键页面/温度。 这是非常有用的。
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
与上面的评论相反，Dust-Meselect器2.2与Firefox 3.6兼容（我刚刚安装了它）。
（不适用于Firefox，但也许这有助于某人）
如果您正在使用chrome，则可以使用此扩展名：
CSS删除和合并 （ https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh ）
- 让你下载一个使用所有使用风格的组合的CSS
- 在popup窗口中显示未使用的样式
- 包括生成的样式
这些看起来有希望
- Unused-CSS.com – 服务蜘蛛您的网站和电子邮件给你的结果
- CSS使用 – Firebug插件
通过只在页面上获取使用的CSS，实际上做到了你想要的最好的一个，并允许你简单地将它复制到剪贴板并粘贴它是这个Chrome扩展CSS使用
漂亮的图片示例
SnappySnippet
有一个名为SnappySnippet的开源的广告插件，我发现它比其他更好的只是扩展了现有的开发工具。 你甚至可以只提取页面的一部分将所有相关的CSS。 看看这个stackoverflowpost
- uncss：查找未使用的CSS -cli工具，使用phantomjs并在页面上执行JS，可以在URL上使用
- grunt-uncss – 只适用于静态文件
- （ 关键的CSS – 为浏览器窗口中可见的元素提取CSS）
这个Firefox扩展可能会解决你的问题， Dust-Meselect器 。 还有一个名为CssCleaner或CssHelper的小型桌面应用程序，但我无法find它的链接…（只是在我的机器下载了很久以前的类似任务）
嗯..我会抛出一些蛮力，通过提取CSS文件的服务器端parsing各种CSSselect器，然后在浏览器中运行每个这些作为jQueryselect器。 不是很优雅，但应该工作？
如果您正在处理单个页面，您也可以使用我的小书签快速获取网页实际使用的CSS：
- 去这里 （如果这个链接被破坏，你也可以从pastebin中获得）。
- 将“下载书签”下的大button拖到书签工具栏上。
而已。 现在，无论何时你想封装一个静态页面（也就是为了使其可移植，或者如果你打算从自己的iframe服务），只需点击书签，它就会在当前页面上显示所有使用的CSS。 点击阴影closures覆盖。
这个解决scheme的一个好处是它支持响应式页面，因为媒体查询也被提取。 作为奖励，媒体查询按视口大小特异性进行sorting（例如，@ @media (max-width: 767px)将在 @media (max-width: 1023px) ）。
如果有需要，我也可以添加一个选项来缩小生成的CSS。 由于我只使用这个小书签为我自己的需要，它没有被广泛testing，所以请报告任何问题的意见。
注意：要使该书签在Chrome中使用本地文件，请将--allow-file-access-from-files到Chrome快捷方式目标。 例：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
这是我使用JavaScript的解决scheme：
var css = []; for (var i=0; i<document.styleSheets.length; i++) { var sheet = document.styleSheets[i]; var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules; if (rules) { css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */'); for (var j=0; j<rules.length; j++) { var rule = rules[j]; if ('cssText' in rule) css.push(rule.cssText); else css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n'); } } } var cssInline = css.join('\n')+'\n';
最后， cssInline是页面及其内容的所有钢材表格的文本列表。
例如：
/* Stylesheet : http://example.com/cache/css/javascript.css */ .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); } .javascript { color: rgb(172, 172, 172); } .javascript .imp { font-weight: bold; color: red; } /* Stylesheet : http://example.com/i/main_master.css */ html { } body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); } a { color: rgb(204, 0, 51); text-decoration: none; } a:hover { color: rgb(153, 153, 153); text-decoration: none; } .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; } #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); } #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; } #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); } #header a { color: rgb(255, 255, 255); } #menu_2 { height: 290px; } /* Stylesheet : [inline styles] */ .hidden { display: none; }
