Online CSS DRYer (dedup)

Question

DRY = "Nie powtarzaj się".

Mam podstawową strukturę css, w której używam do budowania bardziej złożonych projektów. Najszybszą metodą tworzenia prototypów jest rozpoczynanie od samego początku i budowanie css, aby uzyskać pożądane wyniki (zamiast edycji istniejących właściwości css z podstawowego css).

Jednak po skończeniu jest wiele powtórzeń nazw klas i właściwości.

Szukam narzędzie online (lub offline), które skanuje mój plik css i inteligentnie przerobić go w formie, która usuwa nadmiarowość i duplikowanie.

Na przykład, jeśli istnieją te dwa wiersze w pliku 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 
    } 

pożądany rezultat (dając niższą pozycję w kaskadzie jako priorytet nad byłym) byłoby usunięcie pierwszej instancji .header i połączyć reguły z obu nagłówków: w jedną dyrektywę .header, tak:

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

Czy taka aplikacja istnieje?

Answer 1

Osobiście używam do tego CSSTidy. Robi wiele rzeczy, ale między innymi scala selektory tam, gdzie to możliwe, i kaskadowo poprawnie (usuwając zduplikowane właściwości). Zwykle uzyskuję około 30% redukcji oryginalnego rozmiaru pliku, co jest zadowalające, a nawet po zminimalizowaniu wciąż jest dość łatwe do odczytania (w przeciwieństwie do miniflikerów JavaScript).

Answer 2

Istnieje wiele narzędzi, aby pomóc tym, oto dwa znajdę pod ręką:

1. CSSTrashman
2. deadweight