Jak Refactor CSS - Przewodnik

Refaktoryzacja CSS musi być istotną częścią procesu tworzenia aplikacji front-end, jeśli chcemy mieć łatwą w zarządzaniu i zoptymalizowaną bazę kodu. Kiedy refaktoryzujemy CSS, my oczyść i zreorganizuj nasz istniejący kod bez dodawania nowych funkcji lub naprawiania błędów.

Refaktoryzacja pomaga zapobiega eksplozji CSS, poprawia czytelność kodu i możliwość ponownego użycia, i sprawia, że ​​CSS jest bardziej elegancki i szybszy do wykonania.

Refaktoryzacja jest zazwyczaj potrzebna po pewnym czasie, ponieważ nawet projekty, które zaczynały się zwięzłą i zorganizowaną bazą kodu prędzej czy później zaczynają tracić jasność; pojawia się spójność, przestarzałe reguły i zduplikowane części kodu; zaczynamy także nadpisywać style i stosować coraz więcej hacków i obejść.

Najlepszym sposobem na utrzymanie naszej bazy kodów CSS jest utrzymanie się “refaktor wcześnie, często refaktor” praktyczna zasada. W tym poście przyjrzymy się kilku wskazówkom, jak możemy przeprowadzić skuteczny proces refaktoryzacji CSS.

1. Przeprowadź wstępny audyt

Aby mieć lepszy obraz tego, co musimy refaktoryzować, najlepiej jest Zacznij od kompleksowego audytu, aby zobaczyć, co mamy obecnie.

Istnieje wiele świetnych narzędzi online, które mogą nam pomóc w tym przedsięwzięciu. CSSDig to potężne rozszerzenie Chrome, które analizuje CSS strony internetowej i analizuje jej słabości, takie jak zbyt specyficzne selektory lub powtarzalne właściwości.

Niewykorzystane CSS bada nieużywane reguły CSS, podczas gdy narzędzia do tworzenia linków, takie jak CSS Lint, umożliwiają szybkie znalezienie kompatybilności, łatwości konserwacji i innych problemów.

Ważne jest również, aby podczas wstępnego audytu ręcznie przeanalizować kod, ponieważ wiele problemów na poziomie architektonicznym można złapać tylko w ten sposób.

2. Skonfiguruj zarządzalny plan

Kod roboczy do refaktoryzacji jest zawsze trudnym zadaniem, ale możemy złagodzić ból, jeśli stworzymy plan dotyczący tego, co musimy zrobić, podzielić proces refaktoryzacji na łatwe do zarządzania części i stworzyć realny harmonogram.

W refaktoryzacji CSS jest kluczowa rzecz, którą zawsze musimy brać pod uwagę: niektóre rzeczy, które refaktoryzujemy, np. zmieni nazwy selektorów konieczne, aby dostosować kod odpowiednich plików HTML i JavaScript także.

Dlatego dobrym pomysłem jest prześledź te dodatkowe modyfikacje, które będziemy musieli wykonać, i zbuduj je w naszym harmonogramie refaktoryzacji wraz z podstawowymi zadaniami związanymi z CSS.

3. Śledź postęp

Przed rozpoczęciem refaktoryzacji jest to niezbędny krok utwórz kopię zapasową naszych początkowych plików. Wprowadzenie systemu kontroli wersji, takiego jak Git lub Subversion, do naszego przepływu pracy może również znacznie usprawnić proces refaktoryzacji, ponieważ będziemy mieć rejestr dotyczący kolejnych kroków, które podjęliśmy, a my będzie w stanie powrócić do poprzedniego etapu, jeśli chcemy przerobić rzeczy.

4. Trzymaj się przewodnika stylu kodowania

Spójny przewodnik po stylu kodowania może znacznie poprawić czytelność kodu i łatwość konserwacji, więc zanim zaczniemy refaktorować, konieczne jest skonfigurować przewodnik po stylu kodowania CSS.

Najważniejsze rzeczy do podjęcia to:

• konwencje nazewnictwa
• zasady formatowania
• zamówienie deklaracji
• jednostki i wartości, których chcemy użyć
• zasady komentowania

Jeśli nie chcemy tworzyć własnego przewodnika po stylach kodowania, możemy również użyć cudzego, takiego jak ThinkUp, który można znaleźć na Githubie.

Nie wystarczy jednak wprowadzić przewodnik po stylach kodowania trzymaj się tego, kiedy przepisujemy kod podczas refaktoryzacji i tego samego oczekuj od wszystkich innych kto pracuje nad naszym projektem.

5. Skonfiguruj spójną strukturę plików

Po przygotowaniach do przygotowania, pierwszą rzeczą, którą musimy zrobić, jest skonfigurowanie odpowiedniej struktury plików CSS, która zwraca uwagę na kaskadowy charakter CSS.

Zależy to głównie od projektu, jak najlepiej zorganizować nasze pliki, ale istnieją pewne uniwersalne zasady, takie jak użycie osobnego normalize.css plik dla stylów resetowania CSS, osobny global.css w przypadku globalnych stylów używanych w całym projekcie i do przechowywania bibliotek innych firm w osobnym folderze.

Jeśli chcemy grać bezpiecznie z naszą strukturą plików CSS, istnieją również gotowe architektury, takie jak SMACSS lub ITCSS, które oferują skuteczne techniki dotyczące jak zorganizować pliki CSS w sposób skalowalny.

6. Pozbądź się nieużywanych i zduplikowanych reguł

Po pewnym czasie pliki CSS zwykle zaczynają obfitować w nieużywane reguły, które musimy zidentyfikować i wyczyścić podczas refaktoryzacji. Istnieje wiele narzędzi internetowych, które umożliwiają nam zbadać te przestarzałe zasady, a czasem także pozwalają nam szybko je pozbyć.

Najbardziej znanym narzędziem do tego celu jest prawdopodobnie UnCSS, moduł Node.js, który pozwala szybko pozbyć się nieużywanych reguł CSS, a także zapewnia nam zaawansowane opcje konfiguracji, które ułatwiają precyzyjne dostosowanie procesu czyszczenia.

Ważne jest, aby wziąć pod uwagę, że my niekoniecznie chcesz usunąć nieużywane reguły z wszystko pliki CSS, które mamy, na przykład z arkuszy stylów globalnych, resetowania lub stron trzecich, więc musimy wykluczyć ich podczas czyszczenia.

Wraz z przestarzałymi regułami, powielone reguły prowadzą również do zbędnego nadmiaru kodu i utraty wydajności. Możemy je usunąć za pomocą modułu CSS Purge Node.js, ale możemy również pracować Linters CSS w celu wyszukiwania duplikatów reguł w naszych plikach CSS.

7. Zmniejsz specyficzność

Specyfika selektora CSS jest obliczana na podstawie liczby i typów wewnętrznych selektorów, które zawiera. Specyficzność CSS jest wyrażona jako 4-cyfrowa liczba, która jest najłatwiejsza do zrozumienia, jeśli sprawdzimy ten wizualny kalkulator specyficzności CSS:

Najniższa specyfika (0001) należy do selektorów, które celują tylko w jeden ogólny element HTML, taki jak

lub

. Im więcej wewnętrznych selektorów zawiera selektor związku, tym wyższa jest jego specyfika.

Niektóre selektory, takie jak ID lub selektory pochodzące ze stylów wbudowanych mają wyższe priorytety, ponieważ zastępują style należące do bardziej ogólnych selektorów. Na przykład specyfika # id1 selektor jest 0100.

W refaktoryzacji celem jest zmniejszenie specyficzności selektorów (trzymaj je krótkie) tak bardzo, jak to możliwe, jak selektory o wyższej specyficzności znacznie redukują możliwość ponownego użycia selektora, i prowadzić do nadętej bazy kodu.

Trzy główne typy selektorów o wysokiej specyficzności to:

1. Wykwalifikowani selektorzy, Jak na przykład p.class1 (definiując str tag nie jest tutaj potrzebny, ponieważ uniemożliwia użycie tej samej klasy z innymi elementami HTML)
2. Głęboko zagnieżdżone selektory, Jak na przykład .class1 .class2 .class3 .class4…
3. ID, Jak na przykład # id1

Narzędzia internetowe, takie jak CSSDig wspomniane w kroku 1, można wykorzystać do szybkiego znalezienia selektorów o wysokiej specyficzności. Przydatne może być również ustawienie reguły w przewodniku stylu kodowania na temat maksymalnego poziomu zagnieżdżania lub ograniczenia używania ID selektory.

8. Wyjdź !ważny Zasady

Reguły CSS, po których następuje !ważny instrukcja zastępuje zwykłe reguły stylu. Za pomocą !ważny prędzej czy później zasady prowadzić do niespójnego kodu. To nie przypadek, że większość narzędzi kłujących zaznacza je jako błąd.

Gdy potrzebujemy szybko napisać CSS, możemy zacząć polegać na nich z powodu ich prostoty.

Główny problem z !ważny deklaracje są takie, że jeśli chcemy je zastąpić w przyszłości, musimy jeszcze więcej !ważny deklaracje w użyciu, więc najlepiej jest je wyeliminować wszędzie tam, gdzie jest to możliwe podczas procesu refaktoryzacji.

9. Oczyść magiczne liczby i zakodowane wartości

Podczas naszego codziennego przepływu pracy w CSS czasami wpadamy na problemy, których nie możemy rozwiązać, i zaczynamy korzystać z tzw magiczne liczby, wartości, które działają z pewnych powodów, ale nie rozumiemy dlaczego. Na przykład weź następujący przykład:

 .klasa1 pozycja: absolutna; top: 28px; po lewej: 15,5%; 

Główny problem z magicznymi liczbami polega na tym, że są przypadkowy, i ucieleśniają “programowanie przez permutację” antipattern. Podczas procesu refaktoryzacji musimy usunąć te arbitralne reguły z naszego kodu i zastąpić je bardziej rozsądnymi rozwiązaniami wszędzie tam, gdzie jest to możliwe.

Ta sama zasada obowiązuje zakodowane wartości także. Prawdopodobnie najczęstsze występowanie zakodowanych wartości można znaleźć w regułach wysokości linii:

 / * bad, musimy dodać dodatkowe stałe reguły wysokości linii do elementów potomnych .class1 * / .class1 font-size: 20px; line-height: 24px;  / * dobra, elastyczna reguła wysokości linii może być bezpiecznie używana również przez elementy potomne * / .class1 font-size: 20px; wysokość linii: 1,2; 

Twarde wartości powodują, że nasz kod jest mniej przyszłościowy i bardziej sztywny, więc w ramach refaktoryzacji musimy je wykopać i zastąp je elastycznymi wartościami.

10. Jednostki refaktora i wartości

Ułatwienie konserwacji i debugowania w przyszłości oraz uniknięcie awarii, które mogą wynikać z używania różnych jednostek, takich jak em i px, jednocześnie musimy trzymaj się spójnych zasad dotyczących tego, jak używamy wartości względnych i bezwzględnych.

Jeśli używaliśmy ich niekonsekwentnie w przeszłości, musimy je przekonwertować, aby mogły stanowić zwięzły system

Jeśli używamy zbyt wielu podobnych kolorów na naszej stronie, mądrą rzeczą może być zracjonalizować schemat kolorów zmniejszając liczbę używanych kolorów. (Oto post na temat praktycznego wyboru schematu kolorów witryny).