A ordem das regras em uma folha de estilo CSS afeta a velocidade de renderização?

Question

Aug 04, 2011, 05:28 PM

A ordem das regras em uma folha de estilo CSS afeta a velocidade de renderização?

Embora isso possa resultar em uma resposta simples, sim ou não, eu vou fazer isso de qualquer maneira

Considere o seguinte exemplo:

HTML

<html>
    <head>
    </head>
    <body>
        <div class="foo">
            <span class="bar">Hello world!</span>
            <p>Some really interesting text.</p>
        </div>
    </body>
</html>

CSS

html {
    /* some css */
}
body {
    /* some css */
}
div.foo {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo p {
    /* some css */
}

A ordem pela qual as regras CSS aparecem, tem algum efeito sobre a rapidez com que o navegador pode renderizar a página? (neste exemplo, isso realmente não importa, mas considere um site real com muito html e css)

Portanto, o script css acima renderizará mais rápido ou mais fácil para o navegador do que:

div.foo p {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo {
    /* some css */
}
body {
    /* some css */
}
html {
    /* some css */
}

Os navegadores se importam? Nós deveríamos

Leia antes de perguntar:

É assim que você estruturaria sua folha de estilo CS Qual é a melhor maneira de organizar regras CSS?Como os navegadores lêem e interpretam CSS?