Wskazówki dotyczące czyszczenia i konserwacji dużego pliku css

Question

Właśnie zacząłem tę nową pracę, gdzie jako projektant muszę przechowywać plik CSS dla naszej aplikacji internetowej. Obecnie obejmuje prawie 7000 linii, waży ponad 160kb i zawiera setki ważnych reguł.

Chciałbym zreorganizować plik, podzielić go na podsekcji, oczyścić i zhomogenizować jego składnię.

Ale wydaje się, że to wielkie przedsięwzięcie, a plik i aplikacja są tak duże i złożone, że zastanawiam się, czy można to nawet zrobić, nie łamiąc czegoś (i nie widząc tego).

Dokonałem audytu pliku za pomocą narzędzi online i wygląda na to, że mogę użyć zautomatyzowanego refaktoryzacji, nie ryzykując zbyt wiele. Wypróbowałem też kilka narzędzi do sprawdzenia, czy selektory są rzeczywiście używane, problem polega na tym, że ta aplikacja internetowa jest napisana całkowicie w javascript, więc całość jest dynamiczna, a zwykłe narzędzia są praktycznie bezużyteczne (brak odpowiednich odnośników do śledzenia, brak mapy witryny itp.)

Czy macie jakieś zalecenia, jak postępować, od czego zacząć i czy jest to nawet warte mojego czasu?

Answer 1

Refaktoryzacja tak ogromny kawałek kodu będzie bardzo czasochłonne i trudne, oto moja 2p warto, z mojego doświadczenia:

1. początek rozgałęzienia projektu (tutaj Przypuszczam, że używasz kontroli wersji narzędzie) - to pozwoli ci grać niezależnie z kodem i oznaczać każdy kamień milowy, który osiągniesz.

2. formatuj swój CSS za pomocą upiększacza - zwiększy to czytelność i ułatwi wyszukiwanie określonych deklaracji bez pomijania żadnych wystąpień.

3. spróbuj zidentyfikować nieużywane/nadmiarowe css i pozbyć się go.

4. można próbować dokonać selektorów krótszy (np .main .foo .bar może być w porządku, jak .bar) - poprawi to czytelność i zwiększają wydajność, ale weź to ze szczyptą soli i być gotowy, aby wrócić, jeśli coś zacząć łamać się na każdym kroku.

5. postaraj się wyeliminować, jeśli to możliwe, dowolny !important - w razie potrzeby wybierz selektor bardziej precyzyjny. Zresetowanie css może pomóc, jeśli większość instrukcji !important została utworzona w celu naprawienia problemów specyficznych dla przeglądarki, w przeciwnym razie wprowadzenie resetowania css teraz może potencjalnie dodać więcej problemów niż je rozwiązać - to, jeśli w ogóle nie ma resetowania css w aplikacji .

6. przerwa i przegrupować css do różnych modułów (plików i czy to pomaga) - Object Oriented CSS jest możliwe technika zachować rzeczy bardziej linkujących, to działa najlepiej, jeśli zaczniesz z nim, ale może również pomóc w refaktoringu . https://github.com/stubbornella/oocss/wiki jest poprawny, ale istnieją alternatywy, które można rozważyć, na przykład SMACSS.

7. Po tym, można rozważyć użycie preprocesora css takiego jak Less lub Sass, co pozwala definiować zmienne i wstawek (podobny do funkcji), modułowość i wiele więcej - to może skończyć się bardzo kosztowne zadanie chociaż, więc uważnie oceń, czy przyniesie ci to więcej korzyści niż ból.

8. testuj tak często i tak często, jak możesz, weź pod uwagę testy jednostkowe, aby upewnić się, że wszelkie zmiany, które wprowadzasz, nie powodują przerw w innych miejscach.

9. Czasami ponowne pisanie wszystkiego może być mniej czasochłonne niż refaktoryzacja, więc nie bój się zostawić rzeczy takimi, jakimi są, jeśli twoja ocena wykaże, że refaktoryzacja nie przyniesie wystarczających korzyści.

To, przed czym stoisz, jest jednym z najtrudniejszych zadań, więc powodzenia!

Answer 2

Rzeczy się zepsują, ale w porządku, przeżyjesz. Ponieważ przepisujesz, dobrze byłoby przyjrzeć się dynamicznemu językowi CSS, jak Saas lub mniej:

Answer 3

Na początku polecam użycie preprocesora CSS. Na przykład możesz użyć LESS. Najpierw ułóż swój CSS za pomocą http://www.procssor.com za pomocą własnych opcji, a następnie wklej go w http://css2less.cc/. Prawdopodobnie będziesz musiał dokonać pewnych zmian w "modularyzacji" kodu.

Następnie można wyjąć fragmenty kodu, które nie pojawiają się na każdej stronie i załadować je ręcznie w miejscu, w którym są potrzebne.

Skompiluj CSS z LESS i zacznij z niego korzystać.

Edit:

Więc CSS może wyglądać następująco:

#wrapper #nav { some-rules } 
#wrapper #content { some-rules } 
#wrapper #footer { some-rules } 

#wrapper #content form#register-form { some-rules } 

Zastosuj css2less:

#wrapper { 
    #content { 
     some-rules; 
     form#register-form { 
      some-rules; 
     } 
    } 
    #footer { 
     some-rules; 
    } 
    #nav { 
     some-rules; 
    } 
} 

I modularise go:

main.less

#wrapper { 
    #content { 
     some-rules; 
    } 
    #footer { 
     some-rules; 
    } 
    #nav { 
     some-rules; 
    } 
} 

register.less

#wrapper { 
    #content { 
     form#register-form { 
      some-rules; 
     } 
    } 
} 

Answer 4

Chciałbym zacząć od nowa

pierwsze usunąć styl z talerz boilder http://html5boilerplate.com/ css jaśniejsze powinno to wyeliminować konieczność dla wszystkich! Ważnych reguł, boilerplate ma na celu usunięcie różnice stylu między przeglądarkami.

Następnie można potencjalnie użyć czegoś takiego, jak http://lesscss.org/, aby utworzyć arkusz stylu z możliwością dynamicznego zarządzania.

Poszukaj elementów wspólnych i użyj dla nich klasy współużytkowanej.

Nawet w najbardziej złożonych aplikacjach nie powinno być potrzebne 7000 arkuszy stylów.

Answer 5

Będziesz musiał przejrzeć cały kod i zrozumieć go. Nie możesz próbować uruchomić go za pomocą zautomatyzowanych programów narzędziowych i zlecić to za Ciebie. Pisanie kompaktowych arkuszy CSS jest sztuką i nie można wykonywać skrótów, bo w przeciwnym razie plik wyniesie ponad 160kb.

Z drugiej strony możesz zacząć od zera i mniej więcej opierać swoje style na oryginale.

Polecam jednak użycie narzędzia "Inspect Element", takiego jak Firebug w przeglądarce Firefox, aby sprawdzić, czy są jakieś zbędne style.

Spróbuj także podzielić style, które pojawiają się na wielu stronach w ogólnym pliku CSS, a inne na określone pliki.