Shebang.pl

Jak może wyglądać przegląd kodu CSS

Zestaw narzędzi typu młotek, piła itp.

Kod w wielu językach programowania przechodzi przed wdrożeniem do użytku przegląd kodu. Bez względu na to czy jest to szybka recenzja, wnikliwy przegląd dokonany przez partnera czy kompletne testy jednostkowe, wszytskie te techniki pomagają z przekonaniem wydać kod, który będzie funkcjonować prawidłowo.

Zastanawiałem się, jak może wyglądać przegląd kodu CSS. Kod ten można pisać na wiele sposobów, a najlepszy z nich zwykle dobierany jest pod kątem konkretnego projektu. W żadnym wypadku nie zamierzam pisać dogmatycznego artykułu. Zamiast tego chcę zaprezentować przykładowy punkt wyjścia do udoskonalenia kodu CSS przed jego publikacją.

Po co w ogóle wykonywać przegląd kodu CSS

To naturalne, że zastanawiasz się dlaczego w ogóle mielibyśmy recenzować CSS. Przegląd kodu stanowi jeszcze jeden etap prac, który wymaga dodatkowego czasu, pieniędzy oraz wysiłku i opóźnia dostarczenie produktu.

Dzięki recenzji możemy jednak spojrzeć na naszą pracę z dystansu i uczciwie ją ocenić – bądź poprosić drugą osobę, która będzie mieć świeże spojrzenie. Tym właśnie różnimy się od maszyn i dzięki temu możemy wystrzec się wymagających naprawy błędów lub problemów z wydajnością, które mogłyby umknąć naszej uwadze przed dostarczeniem kodu.

Przegląd kodu nie służy jedynie wcześniejszemu wyeliminowaniu błędów – może przynieść o wiele więcej korzyści. Zauważyłem, że podzielenie przeglądu na kilka ukierunkowanych na osiągnięcie konkretnych korzyści obszarów pomaga uporządkować proces recenzji i przyspiesza osiąganie dobrych rezultatów. Twoje indywidualne korzyści mogą różnić się od tych przedstawionych poniżej. Wymieniłem jednak te, które odnoszę regularnie.

Obszar 0. Kod spełnia swoje zadanie

Nie będziemy się nad tym zbytnio rozwodzić, lecz warto o tym etapie pamiętać. Podstawowym zadaniem kodu CSS jest sformatowanie strony zgodnie z zamierzeniem projektanta. CSS powinien nadać stronie wygląd pokrywający się ze szkicem projektowym czy dopasować go do wymagań stylistycznych. Wygląd ten tworzony jest dzięki zmiennej treści strony (tytuły i treść różnej długości, obrazy różnej wielkości itd.). Jeśli CSS nie spełnia tego zadania, należy to naprawić w pierwszej kolejności.

Jeśli strona jest responsywna, upewnij się, że sformatowane elementy działają płynnie na każdym punkcie kontrolnym.

Obszar 1. Styl i spójność

Na tym etapie naszym celem jest upewnienie się, że kod CSS został dobrze napisany, zorganizowany i udokumentowany. Ci z nas, którym zdarzyło się przejąć projekt po innych programistach wiedzą, jakie niesie to ze sobą korzyści. Kod, w którym stosowana jest spójna konwencja nazewnicza i który ma dokładną dokumentację jest łatwiejszy do zrozumienia, a ponadto zawiera instrukcje dotyczące jego obsługi i dalszego udoskonalania.

Pytania, jakie należy zadać:

Dostępne zasoby:

Obszar 2. Zgodność z przeglądarkami

Kiedy już kod CSS jest odpowiednio zorganizowany i spójny, zwykle sprawdzam jak formatowanie prezentuje się w różnych przeglądarkach i na różnych urządzenia. Dobrze napisany kod to jedno, jednak nie zda się on na wiele, jeśli nie działa w odpowiednim miejscu i czasie.

Pytania, jakie należy zadać:

Dostępne zasoby:

Obszar 3. Precyzja

Teraz czas ocenić jak precyzyjne są elementy naszego kodu i sprawdzić, które fragmenty można poddać refaktoryzacji. Przegląd tego obszaru pozwoli nam stworzyć funkcjonalną kaskadę stylów, której elementy będą tak modułowe lub tak precyzjne jak chcemy.

Pytania, jakie należy zadać:

Dostępne zasoby:

Obszar 4. Wykorzystanie preprocesora

Jeśli projekt nie korzysta z preprocesora, zignoruj ten etap. Jeśli zaś korzysta, na pewno znajdzie się kilka rzeczy, które warto przemyśleć.

Pytania, jakie należy zadać:

Dostępne zasoby:

Obszar 5. Wydajność

Nie umieściłem etapu poświęconego wydajności na końcu procesu recenzji po to, by umniejszyć jego znaczenie, lecz by był wisienką na naszym przeglądowym torcie. Zapewnienie wydajności kodu CSS jest często kwestią jego doszlifowania, a także zależy od sposobu w jaki kod jest dostarczany i udostępniany. Z tego powodu zwieńczenie przeglądu etapem poświęconym wydajności wydaje się uzasadnione – nawet jeśli zawsze podświadomie mamy ją na uwadze.

Pytania, jakie należy zadać:

Dostępne zasoby:

Podsumowanie

Na pewno nie wszystkie z wymienionych pytań i narzędzi są zawsze potrzebne i mają zastosowanie w każdym projekcie. W gruncie rzeczy istnieje prawdopodobnie jeszcze więcej pytań i narzędzi, którym warto poświęcić uwagę. Czy są jeszcze jakieś pytania, które sobie rutynowo zadajesz przed przekazaniem arkuszy stylów do użytku? Na którym etapie przeglądu zająłbyś się, na przykład, wpływem CSS na dostępność strony? Podziel się swoimi przemyśleniami!

Pamiętaj również, że przegląd nie służy stworzeniu kodu doskonałego. W przypadku CSS idziemy na kompromisy z wielu powodów (celowo bądź nie). Koniec końców, wystarczy, że staramy się po prostu dobrze wykonać naszą pracę, a przeprowadzenie przeglądu kodu nam w tym pomoże.

Exit mobile version