Question

晚上好。

我有一个带有+20个css文件导入的html页面。如何将这些连接到一个css文件中并仅提取与html页面相关的css规则？

Answer 1

_{这个问题并没有解决OP的问题。但是，它留在这里作为从搜索引擎到达的客人的参考。}

您的方法存在轻微缺陷。

请允许我将您重定向到Chris Coyer @ CSS-Tricks的精彩文章： One Two or Three 。

这是简短版本，根据这种方法，每个页面最多应有3个CSS文件：

global.css - 包含网站级规则（正文背景，CSS重置，排版等）。
section.css - 其中包含部分级别规则，根据我的意思，Stack Overflow的主页面将具有某种样式，而所有常见问题解答共享另一个不同的FAQ特定规则文件。
page.css - 其中包含页面级规则。如果某个页面需要一个特定的规则（例如，某个页面），那么它们就会放在这里。

原因是，不会更改的文件会被缓存。这意味着，用户只会下载一次CSS文件（假设它没有改变），并且在将来的访问中，文件将从用户的机器上加载，节省宝贵的时间和带宽。

如果您提供的文件是根据用户正在查看的页面生成的，则会失去该缓存功能。因此，虽然文件大小较低，但您需要一遍又一遍地下载文件。

TL;博士

创建一个全局的CSS文件，保持静态，缩小并提供服务。然后在网站/应用的不同部分制作一堆更具体的CSS文件。在需要第三页特定文件的地方，它不会发生太多。

Answer 2

创建一个空白的CSS文件。将所有CSS复制到该文件中。缩小新的CSS文件。导入新的CSS文件并删除对所有其他CSS文件的引用。将其留给浏览器“仅提取与html页面相关的css规则”。

Answer 3

我想不出一个简单的解决方案。但是如果你使用jQuery，你可以尝试以下代码。它在CSS中搜索DOM中的每个元素并输出它。只需将其粘贴到<script type="text/javascript"></script>部分的<head>标记中，并确保包含jQuery。

仅使用Chrome和a simple test site进行测试，但它也适用于更复杂的样式表和DOM结构。

$(function(){
    var styles = new Array;
    $('body, body *').each(function(index, element){
        //Get all stylesheets
        var sheets = document.styleSheets;
        for(var i in sheets) {
            //For every stylesheet...
            var rules = sheets[i].rules || sheets[i].cssRules;
            for(var r in rules) {
                //Check or every rule if it matches the element & check if already appended
                if($(element).is(rules[r].selectorText) &&
                   $.inArray(rules[r].cssText,styles) == -1){
                    //Append CSS to array
                    styles.push(rules[r].cssText);
                }
            }
        }
    });
    //Output
    $('body').text(styles.join(''));
});

保存网页和紧凑的CSS

3 个答案: