Meu objetivo principal é tentar reordenar um bloco de estilo CSS baseado na especificidade. Eu já tinha ajudado deASSIM e consegui produzir essa função.Veja a essência.

Aqui está um exemplo:

function specificity($selector){
// https://gist.github.com/2774085
}

$compare = function($a, $b) use ($specificity) {
    return $specificity($a) - $specificity($b)
};

$array = css_array();

uksort($array, $compare);

O acima tem funcionado muito bem até me deparar com este CSS:

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

Isso é reordenado nisso:

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

No entanto, não é assim que o navegador aplica o CSS.

Eu acho que minha função de especificidade pode estar faltando a importância da ordem de CSS, em vez de ordenar com base na especificidade do seletor? Isso é verdade?

Atualizar

Eu acho que o que devo fazer é na minha função de comparação, eu devo sempre adicionar um ponto extra de dizer10 porque a especificidade não é baseada apenas em seletores, é baseada na ordem do seletor também. Então, algo assim:

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    };

Como isso parece e como eu determino o número de pontos para dar neste caso?