DRYer CSS online (deduplicazione)

Question

DRY = "Non ripetere la registrazione".

Ho un framework css di base in cui utilizzo per creare progetti più complessi. Il metodo più veloce di prototipazione è solo quello di iniziare alla fine e creare il css per ottenere i risultati desiderati (piuttosto che modificare le proprietà css esistenti dal css di base).

Tuttavia, dopo che ho finito, c'è un sacco di ripetizione di nomi di classe e proprietà.

Sto cercando uno strumento online (o offline) che esegua la scansione del mio file css e lo elabora in modo intelligente in una forma che rimuova la ridondanza e la duplicazione.

Ad esempio, se sono presenti queste due righe in un file CSS:

//FROM THE BASE CSS 
.header{ 
    font-weight:bold; 
    font-size:1.5em; 
    background:red; 
    margin:0 auto; 
    padding:20px 
    } 

//FROM THE ADDED CSS 
.header{ 
    font-weight:normal; 
    font-size:1.25em; 
    background:blue; 
    padding-bottom:0; 
    margin-top:-20px 
    } 

Il risultato desiderato (dando l'elemento inferiore nella cascata come prioritario rispetto al primo) sarebbe quello di rimuovere la prima istanza .header direttiva e unire le regole da entrambe le istanze .header in una direttiva .header in questo modo:

.header{ 
    font-weight:normal; 
    font-size:1.25em; 
    background:blue; 
    margin:-20px auto 0 auto; 
    padding:20px 20px 0 20px 
    } 

Vuol tale applicazione esiste?

Answer 1

Personalmente, io uso CSSTidy per questo. Fa un sacco di cose, ma tra le altre cose unisce i selettori dove possibile e le cascate correttamente (rimuovendo le proprietà duplicate). Di solito ottengo una riduzione del 30% circa delle dimensioni del file originale, il che è accurato, e anche se minified è ancora ragionevolmente facile da leggere (a differenza dei minifiers di JavaScript).

Answer 2

ci sono una serie di strumenti per aiutare con questo, ecco due trovo a portata di mano:

1. CSSTrashman
2. deadweight