Strumento "Normalizzatore" CSS?

Question

Ho bisogno di mantenere & migliorare un sito web esistente e sto affogando nella ridondanza che ho scoperto nel suo foglio di stile CSS. Data la ridondanza esistente e l'ordinamento non logico di elementi, è difficile tenere traccia e prevedere come si propagherà un cambiamento minore attraverso il sistema, o dove applicare una modifica per ottenere un certo effetto, senza perdere molto tempo a riapprendere il cambiamento File CSS e sperimentazione.

Ho utilizzato i componenti aggiuntivi Firebug e "Web Developer" per Firefox, ma chiaramente non sono sufficienti per me. Ho bisogno di uno strumento che possa dirmi dove sono presenti "sovrascritture" ridondanti e forse suggerire un migliore schema a cascata.

In altre parole, aiutarmi a generare il file CSS più breve che fornisce la stessa identica funzionalità visiva che ho adesso.

Per chiarire ulteriormente, non sto cercando uno strumento che sostituisca "# 000000" con "# 000", "0.5em" con ".5em", "bianco" con "#FFF", ecc. (Questo indirizza la ridondanza "numero di caratteri", ma non affronta la ridondanza "logica a cascata"). Sto cercando uno strumento che possa dirmi, ad esempio, che un attributo "font-size: 10px" di un elemento figlio è ridondante perché è già ereditato dal suo genitore.

Una funzione più avanzata: l'attributo "colore: # 000000" di una classe o di un ID è ridondante perché non viene utilizzato in nessuno dei file HTML/PHP sul sito Web.

C'è uno strumento che esegue questo tipo di "normalizzazione" automaticamente?

Answer 1

Per trovare duplicato/inutilizzato inutili CSS/sulla base di markup, è possibile provare , o Dust-Me Selectors (come @Aaron D menzionato), o CSS Crunch. Gli ultimi due sono le estensioni del browser (rispettivamente per Firefox e IE), che guardano solo una pagina, mentre WARI è destinato a guardare un intero sito. Tuttavia, non ho avuto molta fortuna nel far funzionare WARI.

Answer 2

Si può provare YUI Compressor. Funziona con file CSS e Javascript.

Answer 3

È possibile provare CSS Tidy (online version). Ridurrà la ridondanza, facoltativamente la conversione in stili di stenografia e può essere usata per creare output miniati e output piuttosto/formattati.

Answer 4

Non sono a conoscenza di un tale strumento e guardando la complessità dei CSS, non sono nemmeno sicuro che sia possibile risolverlo (alcuni stili CSS sono lì solo per colpire i vecchi browser in conformità). Quindi, quanto valore ha uno strumento che crea un nuovo CSS conforme a W3C che non viene visualizzato sulla maggior parte dei browser a causa di bug?

Detto questo, si dovrebbe dare un'occhiata a Envjs che consente di leggere una pagina Web in un browser emulato e quindi esaminare il risultato. Non perfetto ma potrebbe iniziare.

Answer 5

Controlla SASS, è un compilatore CSS con una propria lingua e sintassi, ma ha capacità di importazione CSS. http://sass-lang.com/

Mi chiedo se un semplice ciclo di importazione/esportazione potrebbe fare il trucco per voi?

Modifica: Sembra che un ciclo di importazione/esportazione non sia sufficiente, ma SASS offre servizi che semplificano la vita durante il refactoring.

Answer 6

Penso che tu stia cercando il Santo Graal dei CSS. Non penso che esista. Il problema è che non sai mai esattamente cosa renderà il rendering del browser e ne avrai bisogno nel tuo foglio di stile. Ho usato il plugin Dust-me Selectors per Firefox per aiutare a localizzare gli stili inutilizzati, ma farlo automaticamente è un compito difficile.

Detto questo, penso che l'utilizzo di un framework come SASS (come già accennato) o LESS sia una risposta di tipo round alla domanda.I framework eliminano gran parte della ridondanza e rendono compatto il tuo CSS. Mi piace meno di SASS per via delle somiglianze con i CSS.

Answer 7

Aaron rende un buon punto sulla complessità. Ad esempio, un tale strumento avrebbe bisogno di accedere non solo ai file CSS, ma anche all'HTML (non sarebbe in grado di determinare cose come l'ereditarietà, altrimenti). Stai cercando qualcosa che possa spiderare un intero sito e prendere in considerazione ogni pagina, o il markup può essere fornito dai file?

È anche probabile che un tale strumento generi CSS che è meno gestibile di quanto un produttore di web decente produrrebbe (sto pensando di accorciare i selettori che potrebbero essere semplicemente "ri-allungati" in un secondo momento). Questo non è un problema se si tratta solo di un'azione temporanea, ma mi chiedo il motivo per cui dovresti farlo in primo luogo.