仅提取特定页面中使用的css
假设您有一个动态生成的站点，过去和现在有太多的人在使用它，现在您有一个包含超过20,000行CSS的共享样式表的集合。它根本没有组织，有一些基于类和id的选择器，但也有太多基于标签的选择器。然后假设你有100个模板，通过一些控制器使用这些样式。
有没有一个工具，它的工作原理可能像Firebug，你可以指向一个url，它可以确定该页面的所有适用的CSS选择器，并将它们转储到一个文件中？基本上是一种逐页拆分共享样式表的方法。
回答 7
Stack Overflow用户
发布于 2011-02-02 04:53:36
我以前用过Dust-Me选择器，这是一个Firefox插件。它非常容易使用和通用，因为它维护了一个跨多个页面的组合列表，其中使用了CSS值。
缺点是我不能自动抓取整个网站，所以我最终只在我网站的关键页面/模板上使用它。尽管如此，它还是非常有用的。
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
与上面的评论相反，Dust-Me选择器2.2与Firefox3.6兼容(我刚刚安装了它)。
Stack Overflow用户
发布于 2017-06-27 00:37:54
以下是我使用JavaScript的解决方案：
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; }Stack Overflow用户
发布于 2017-11-24 10:07:21
检查PurifyCSS，这适用于那些可以处理命令行界面或Gulp的人/Grunt/Webpack
您可以从单个页面、多个页面或整个项目中删除未使用的样式，即使这些类是由javascript注入的。
如果你能用谷歌搜索，有大量的资源可以让你了解PurifyCSS。
https://stackoverflow.com/questions/4867005
复制相似问题
腾讯云开发者
