Order CSS sulla base di selettore Specificità

Question

ho analizzato un dato file CSS/stringa in un oggetto JSON in questo modo:

{ 
    "#header": { 
     "color": "#000000" 
    }, 
    "#header h1": { 
     "color": "#000" 
    }, 
    "h1": { 
     "color": "#4fb6e5" 
    } 
} 

Quello che voglio fare ora è ri-ordinare loro sulla base di Specificty. In questo caso, lo #header h1 dovrebbe venire dopo lo h1 nell'oggetto JSON poiché questo è il modo in cui verranno applicati nel browser.

Come posso fare questo? Ci sono delle librerie esistenti per questo? O qualche utile libreria per aiutarti?

Posso usare sia Javascript/jQuery o PHP per fare questo. Sto cercando consigli sull'implementazione e spero che questo sia già stato fatto!

Answer 1

risposte brevi:

ci sono delle librerie esistenti per questo?

No, nessuno dei quali sono a conoscenza di questo "out-of-the-box" per te.

O qualche utile libreria per aiutare con questo?

Sì, c'è json_decode e uksort:

$specificity = function($selector) { 

    /* 
    * @link http://www.w3.org/TR/selectors/#specificity 
    * 
    * 9. Calculating a selector's specificity 
    * 
    * A selector's specificity is calculated as follows: 
    * 
    * * count the number of ID selectors in the selector (= a) 
    * * count the number of class selectors, attributes selectors, and 
    * pseudo-classes in the selector (= b) 
    * * count the number of type selectors and pseudo-elements in the 
    * selector (= c) 
    * * ignore the universal selector 
    * 
    * Selectors inside the negation pseudo-class are counted like any other, 
    * but the negation itself does not count as a pseudo-class. 
    * 
    * Concatenating the three numbers a-b-c (in a number system with a large 
    * base) gives the specificity. 
    */ 
    ... 
    return (int) $result; 
} 

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

$array = json_decode('{"yours" : "json"}', true); 

uksort($array, $compare); 

echo json_encode((object) $array); 

Come questo esempio di codice mostra, spiega solo come calcolare la specificità in un commento e non contiene il codice. Questo è solo perché non ho quel codice a portata di mano, ma ho inserito le specifiche su come è fatto (almeno per CSS 3).

Se stai cercando un parser di selettori CSS, so di XDOM (perché l'ho scritto). È disponibile su github: https://github.com/hakre/XDOM - È un parser al selettore CSS compatibile con CSS 3 al 100%.

Per quanto ne so, questo è ciò che più di oggi si ottiene in termini di soluzioni già pronte. Tutti gli altri parser di selettori CSS che conosco non sono pienamente compatibili con lo standard CSS 3 perché non seguono la specifica W3C. Quale potrebbe essere un bene per te: se non hai bisogno di una stretta compatibilità CSS3, potresti trovare alcuni altri pezzi di codice che soddisfano già le tue esigenze.

Answer 2

In realtà c'è un algoritmo standard per ordinare per specificità, penso che potresti volerlo dare un'occhiata.

CSS Specificity

Inoltre può essere utile una sorta di formula euristica, ad esempio, verificare se v'è un leader # o contare la quantità di spazi e punti.