Jak sprawić, by twój kod był łatwy do utrzymania dzięki przewodnikom w stylu życia

Przewodniki stylu z przeszłości uważane są zazwyczaj za dokumenty projektowe koncentrujące się na brandingu i wykorzystaniu kolorów. Jednak wraz z pojawieniem się niesamowicie dużych baz kodów dla stron takich jak Facebook lub szeroki asortyment produktów Google, przewodniki od tamtej pory ewoluowały.

W dzisiejszych czasach przewodniki życia zawierają zawsze aktualną dokumentację aktualnej podstawy kodu i jej przypadków użycia. Dzięki tym dokumentom możemy napisać znacznie więcej kodu, który można utrzymać i ponownie użyć, natychmiast widząc, jak zoptymalizowana jest nasza baza kodów.

Co jest w żywym przewodniku stylu?

Przewodniki stylu życia są podobne do starszych odpowiedników; zawierają logo i informacje o brandingu, wykorzystanie kolorów, a także ogólny zarys wykorzystania kodu. Sekcja konspektu kodu pozwala łatwo znaleźć duplikat lub podobny kod i połączyć go w celu zoptymalizowania bazy kodu lub wyświetlenia składników już używanych. Większość przewodników przedstawia podejście typu "log", w którym udokumentowane jest każde wystąpienie kodu lub udokumentowany jest tylko celowo modułowy kod.

Te przewodniki nie tylko koncentrują się na HTML i CSS, ale także na innych językach, które można modularyzować pod kątem wydajności, takich jak JavaScript i PHP. Kilka pełnych przykładów przewodników stylu życia można znaleźć na stronie Github , Mozilla , i MailChimp . Jak widać z tych przykładów, często strona lub pod-witryna wyświetlają przypadki użycia obok kodu dla każdego komponentu. Ułatwia to przechodzenie i chwytanie ich, gdy ich potrzebujesz, a także dla nieznanych projektantów i programistów, aby zobaczyć, jak działają komponenty w sposób interaktywny.

Rozpoczęcie własnego przewodnika stylu życia

Rozpoczęcie własnej dokumentacji przewodnika w stylu życia od zera może wydawać się zniechęcające, szczególnie w przypadku większych projektów. Zazwyczaj jednak zwraca się nakład czasu niezbędny do wykonania tego zadania. Większe projekty zyskują ogromnie na żywej dokumentacji stylów witryn i struktury kodu. Mniejsze projekty mają mniej zauważalny, ale czasami wciąż opłacalny, zwrot z inwestycji czasu. W obu przypadkach, jeśli pracujesz nad projektem, który pewnego dnia może zostać przekazany innemu projektantowi lub programistce, zrobi on dzień, aby zobaczyć taką dokumentację.

Zacznij od fundamentu

Komponenty, których często używasz, są najlepszymi przypadkami dla żywych przewodników, natychmiast przychodzą na myśl przyciski. Krótka lista rzeczy, które możesz chcieć rozważyć, to opcje układu (np. Opis systemu siatki), typografia, użycie koloru, przyciski i style linków, stylizacja formularzy, powiadomienia lub alerty oraz styl listy. Prawie wszystko, co może być przydatne do wielokrotnego użytku, można dodać w zasadzie. Podczas rysowania pamiętaj, aby zachować elastyczność. Nigdy nie nadawaj ostrzeżenia lub przycisków do jednej strony lub przypadku użycia, chyba że jest to absolutnie konieczne. Zamiast tego dodaj klasy modyfikujące, aby zbudować podstawową podstawę dla takich rzeczy jak kolor, typografia lub zmiany estetyczne. W ten sposób zawsze możesz liczyć na klasę .button, aby wyznaczyć spójną szerokość, wysokość i rozmiar tekstu, jednocześnie pozwalając klasom modyfikującym zmieniać rzeczy w poszczególnych przypadkach użycia.

Cele możliwego do utrzymania kodu

Celem możliwego do utrzymania kodu jest sprawienie, aby rzeczy były wielokrotnego użytku i przyszłościowe. Komponenty takie jak paski powiadomień, przyciski, nagłówki i stopki są świetnymi przykładami kodu wielokrotnego użytku - rzeczy, które możesz wielokrotnie używać w witrynie lub na tej samej stronie. Jeśli porzucasz stary lub już napisany kod, aby było łatwiejsze do utrzymania po fakcie, jest to całkiem proste. Zacznij od pozbycia się CSS do podstaw. Powinieneś pozostać z klasą komponentów definiującą obiekty strukturalne, takie jak wysokość, szerokość i położenie. Podczas gdy dodatkowe klasy modyfikujące mogą być używane do zmiany estetyki, takich jak kolor czy typografia. Dodatkowo, jeśli Twój projekt używa identyfikatora lub klasy dla każdej strony, możesz w ten sposób nadać niepowtarzalny wygląd przypadkom użycia na stronę. Pamiętaj, aby nie odwoływać się do tej praktyki zbyt wiele, ponieważ może łatwo dodać wagę do swojego przewodnika po stylu.

The Zasada KISS to zasada projektowania dobrze pasująca również do modułowego procesu rozwoju. Pisanie prostego, łatwego w utrzymaniu kodu jest zwykle najłatwiejsze dzięki zachowaniu prostych komponentów. Jeśli chodzi o prostotę, Jeśli jest to możliwe, aby poprawić wydajność i / lub użyć mniej kodu, przy jednoczesnym osiągnięciu tego samego rezultatu, nasze komponenty powinny być napisane, aby to zrobić. Końcowymi celami możliwej do utrzymania struktury kodu jest posiadanie czegoś do ponownego użycia, małego i znacznie bardziej wydajnego niż nie-konserwowalny odpowiednik.

Konwencje nazewnictwa w CSS

Jeśli chodzi o pracę z możliwą do utrzymania strukturą kodu, bardzo ważne stają się konwencje nazewnictwa. Pisanie opisowych klas CSS znacznie ułatwi utrzymanie bazy kodów. Jest bez limitu na długości klas CSS, więc używaj tego na swoją korzyść. Pamiętaj jednak, aby zachować spójną konwencję nazewnictwa, ponieważ mieszanie kresek i podkreśleń lub przypadku wielbłąda ze wszystkimi małymi literami może łatwo wprowadzić zamieszanie. Zazwyczaj świetnym pomysłem jest uczynienie klas elementów bardzo opisowymi, przy jednoczesnym zmniejszeniu klas modyfikatorów. Poniżej znajduje się przykład przycisku, unikalna reguła użycia i klasy modyfikujące.

  / * To jest klasa komponentów, powinna zawierać tylko podstawowe zasady konstrukcyjne * /. Przycisk {display: block; szerokość: 250px; wysokość: 48px; wysokość linii: 48px;} / * Ten wyjątkowy przypadek użycia nakreśla przycisk używany na stronie głównej * /. strona główna-przycisk-cta {display: blockmargin: 0 auto 50px; szerokość: 180px; wysokość: 60px; wysokość-linii: 60px;} / * Poniżej znajdują się klasy modyfikatorów, które dodawane są dodatkowo do komponentu klasa, aby dodać kolor lub inne zmiany estetyczne * /. czerwony {tło: # C54F48} .rounded {border-radius: 5px;} 

Zautomatyzowane rozwiązania

Automatyczne generatory przewodników stylów zaczęły pojawiać się w lewo i w prawo, aby pomóc przewodnikom push for style. Prototyp stylu to generator SASS zbudowany przez Ram Richarda i Mason Wendell z Zespół SASS . Jest to jedna z lepszych opcji w tej chwili, z podobnymi generatorami jak Hologram , Kalei , StyleDocco , i KSS również okazuje się przydatny.

Automatyczny vs ręczny

Jak zawsze są plusy i minusy, jeśli chodzi o stosowanie obu metod. Zautomatyzowane rozwiązania są szybkie i mogą być używane po fakcie, ale czasami są też surowe. Ręcznie robione przewodniki po stylach sprawiają, że wiesz wszystko, czego potrzebujesz, ale poświęcasz więcej czasu. Osobiście, ręcznie wykonane podejście jest dla mnie najlepsze w większości przypadków, ponieważ jest najbardziej elastyczny pod względem współpracy z innymi programistami. Ale na pewno warto poświęcić czas na wypróbowanie niektórych zautomatyzowanych rozwiązań, aby dowiedzieć się, jak działają i co mówią o Twoim kodzie.

Sprawdzanie kodu

Strony internetowe nigdy nie są skończone. Modyfikujemy rzeczy, przechodzimy do nowych stylów i trendów, a na koniec możemy otrzymać dużo kodu z poprzednich wersji. Ważne jest, aby poświęcić chwilę i spojrzeć na "koniec" każdej wersji, aby upewnić się, że rzeczy są tak czyste, jak tylko mogą być. W tym momencie chciałbym również rzucić każdy komponent (i klasy modyfikujące) w Codepen przetestować obsługę przeglądarki i odpowiednio zanotować. Może to zaoszczędzić mnóstwo czasu później, jeśli projektujesz stronę z ograniczeniami wsparcia. Podczas przeglądania należy również zwracać uwagę na komponenty, które mogą być ze sobą w dziwny sposób lub powodować problemy z modelem pudełkowym.

Wniosek

Podsumowując, przewodniki stylu powinny skutkować kodem, który jest bardzo manipulacyjny i elastyczny, a jednocześnie łatwy w utrzymaniu i czytaniu. Biorąc pod uwagę, ile czasu musimy zainwestować, aby osiągnąć taki wynik, przewodniki stylu życia mają o wiele bardziej wymierny wpływ na większe projekty niż mniejsze. Złożone lub duże projekty zyskują tak bardzo na optymalizacji i zwiększeniu wydajności, że warto poświęcić czas na osiągnięcie tych wyników. Stworzenie przewodnika po żywym stylu dla małej witryny lub projektu może jednak nie być warte inwestycji czasu.

Podsumowując, wszyscy powinniśmy starać się napisać czysty, możliwy do utrzymania kod, który koncentruje się na ochronie przyszłości. Przewodnicy stylu życia zwykle zachęcają do takiego przepływu pracy i pomagają tworzyć programom i widzom o wiele szczęśliwsze.

Wyróżniony obraz / miniatura, programowanie obrazu przez Shutterstock.