仅提取特定页面中使用的css

Question

假设您有一个动态生成的网站,过去和现在都有太多人使用,现在您有一组包含超过20,000行CSS的共享样式表.它根本没有组织,有一些类和基于id的选择器,但也有太多基于标签的选择器.然后说你有100个模板使用这些样式,通过一些控制器.

是否有一个工具,可能像Firebug一样工作,您可以指向一个URL,它将确定该页面的所有适用的CSS选择器并将它们转储到文件中？基本上是一种逐页拆分共享样式表的方法.

Answer 1

只需在页面上获取使用过的css并允许您将其简单地复制到剪贴板并粘贴它就是这个Chrome扩展程序CSS使用了实际完成所需内容的最佳实际操作

漂亮的图片示例

Answer 2

之前我使用过Dust-Me选择器,这是一个Firefox插件.它非常易于使用和通用,因为它在使用CSS值的许多页面上维护组合列表.

缺点是我无法自动化它来蜘蛛整个网站,所以我最终只在我的网站的关键页面/模板上使用它.尽管如此,它仍然非常有用.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

与上面的评论相反,Dust-Me Selectors 2.2与Firefox 3.6兼容(我刚安装它).

Answer 3

看起来很有希望:

• Unused-CSS.com - 蜘蛛网站的服务,并通过电子邮件向您发送结果
• CSS用法 - Firebug插件

Answer 4

(不适用于Firefox,但也许这有助于某人)

如果您正在使用chrome,则可以使用此扩展程序:

CSS删除并合并(https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

• 让你下载一个包含所有使用样式的组合css
• 在弹出窗口中显示未使用的样式
• 包括生成的样式

Answer 5

我发现了Uncss-Online - 非官方服务器，非常方便测试或一次性使用！我认为这是我遇到过的最好的工具。

UnCSS 是一个从样式表中删除未使用的 CSS 的工具。它可以跨多个文件工作，并支持 Javascript 注入的 CSS。可以这样使用：

• 将您的 HTML 和 CSS 复制并粘贴到提供的框中
• 点击按钮
• 等待魔法发生
• 没用的 CSS 没了，剩下的就拿来用吧！

您可以查看他们的Github 页面，了解使用此工具的其他高级方法

Answer 6

这是我使用 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; }