Jak zoptymalizować CSS za pomocą Przewodników stylu kodu

Kiedy projektanci mówią o przewodnikach po stylach, zazwyczaj mają na myśli uzgodniony podręcznik na spójny wygląd i styl strony internetowej lub aplikacji, z dobrze zaprojektowanym schemat kolorów, typografia i interfejs użytkownika to jest używane w całym projekcie.

Istnieje również inny typ przewodnika po stylach, którego możemy użyć w tworzeniu stron internetowych, i jest to równie ważne, ale znacznie rzadziej omawiane: przewodniki stylu dla samego kodu. Przewodniki stylu kodu są raczej dla programistów niż projektantów, a ich głównym celem jest optymalizacja CSS lub innego kodu.

Zastosowanie odpowiednich przewodników w stylu kodu zapewnia nam lepiej zorganizowana, spójna baza kodu, ulepszona czytelność kodu i bardziej konserwatywny kod. To nie przypadek, że duże firmy technologiczne, takie jak Google, AirBnB lub Dropbox, dobrze z nich korzystają.

W tym poście przyjrzymy się, w jaki sposób możemy zoptymalizować nasz CSS za pomocą przewodników w stylu kodu CSS.

Przewodniki stylu kodu a biblioteki wzorców

W naszej branży istnieje pewien stopień niepewności co do tego, co możemy nazwać przewodnikiem stylu. Lista oprócz na przykład używa go synonimicznie z terminem biblioteka wzorów w tym artykule, ale możemy również wpaść na tego rodzaju definicję w innych postach.

Z drugiej strony istnieją także publikacje, takie jak CSS Tricks lub blog Brada Frosta, które odróżniają przewodniki stylu kodu od bibliotek wzorców. To drugie podejście prawdopodobnie zbliża nas do dobrze zoptymalizowanej strony internetowej pozwala nam obsługiwać kod i projekt osobno, więc użyjemy tego w tym poście.

Zarówno przewodniki stylu kodu, jak i biblioteki wzorców zawierają strategię stylizacji, ale innego rodzaju. Biblioteki wzorców, takie jak Bootstrap, Zurb Foundation, BBC Global Experience Language lub biblioteka wzorców MailChimp, dostarczają nam interfejs użytkownika z gotowymi klasami CSS, typografią, schematem kolorów, czasem systemem siatki i innymi wzorami projektowymi.

Zawierają one przewodniki stylu kodu CSS, takie jak Evernote lub ThinkUp (lub te wymienione w intro) zasady dotyczące pisania CSS w tym takie rzeczy konwencje nazewnictwa, struktura plików, kolejność właściwości, formatowanie kodu, i inni.

Zauważ, że żywy styl prowadzi generatory, takie jak KSS, Styledown lub Pattern Lab, generuj biblioteki wzorców i nie przewodniki po stylach kodowania. Chociaż biblioteki wzorców są również bardzo przydatne i podnoszą proces tworzenia stron internetowych, nie pozwalają nam one na optymalizację samego kodu.

Zbuduj przewodnik po stylu kodu CSS

Ostatecznym celem przewodnika po stylach kodu CSS jest zapewnienie, że będziemy mogli pracować ze spójną, łatwą do debugowania bazą kodu napisaną przez programistów, którzy przestrzegają tych samych zasad stylizacji kodu. Tworzenie przewodnika po stylach kodu CSS może zająć trochę czasu, ale jest warte wysiłku, ponieważ musimy to zrobić tylko raz. Następnie możemy użyć tego samego przewodnika po stylach w różnych projektach.

Ważne jest, aby pamiętać, że najlepsze przewodniki stylu nie tylko zawierają same zasady stylizacji, ale także przykłady dobrego i złego użycia, ponieważ w ten sposób programiści mogą bardziej intuicyjnie zrozumieć zasady.

Na przykład AirBnB pokazuje dobre i złe przykłady dla programistów w następujący łatwy do strawienia sposób:

Struktura pliku

Najpierw musimy wymyślić logikę, zgodnie z którą będziemy organizować nasze pliki CSS. Dla mniejszych projektów wystarczy jeden plik CSS, ale dla większych jest to wystarczający zawsze lepiej rozbić kod, i połącz osobne pliki później w produkcji.

Niektóre przewodniki po stylach, takie jak ThinkUp, również nas ostrzegają nie używa stylów wbudowanych lub wbudowanych chyba że jest to nieuniknione; to także przydatna zasada, którą warto zastosować.

Zagnieżdżanie

Zagnieżdżanie to świetna funkcja w CSS, ale czasami może wymknąć się spod kontroli. Nikt nie czuje się szczególnie szczęśliwy, zwłaszcza w środku frustrującego procesu debugowania, wpadając na bardzo długie selektory, takie jak ten:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad;

Więc zawsze dobrze jest ustawić rozsądny limit zagnieżdżenia, na przykład GitHub wybrał trzy poziomy w swoim przewodniku stylu. Ograniczając zagnieżdżanie, możemy również zmusić się do napisania lepiej uporządkowanego kodu.

Zasady nazewnictwa

Używanie spójnych reguł nazewnictwa dla selektorów CSS ma kluczowe znaczenie, jeśli chcemy zrozumieć nasz kod miesiące, a nawet lata później. Istnieje wiele rozwiązań i jest tylko jedna ścisła zasada, której musimy przestrzegać tj. nazwa selektora nie może zaczynać się od numeru.

Cztery wspólne style używane w nazewnictwie selektorów to .małe litery, .under_scores, .kreski, i .lowerCamelCase. Można wybrać dowolną z nich, ale musimy postępować zgodnie z tą samą logiką w całym projekcie.

Za pomocą tylko nazwy selektorów semantycznych jest również niezbędna, jeśli chcemy mieć znaczący kod. Na przykład zamiast .Czerwony przycisk (co nie pokazuje, co robi przycisk) lepiej jest użyć .przycisk ostrzegawczy nazwa (która mówi, co robi), ponieważ w ten sposób umożliwiamy programistom (i naszym przyszłym ja) zrozumienie, co ten przycisk robi.

co więcej jeśli chcemy zmienić kolor z czerwonego na inny w przyszłości, możemy to łatwo zrobić bez kłopotów. Istnieją również konwencje nazewnictwa CSS, takie jak konwencja BEM (Block, Element, Modifier) skutkować spójną strukturą nazewnictwa o unikalnych i znaczących nazwach.

Zasady formatowania

Formatowanie kodu obejmuje takie rzeczy, jak użycie białych znaków, kart, wcięć, odstępów, podziałów linii itp. Nie ma tak naprawdę uniwersalnej dobrej lub złej metody formatowania, jedyną zasadą jest wybierz spójne reguły, które dają czytelny kod, i podążaj za nimi.

Dropbox na przykład wymaga od programistów umieszczania spacji po dwukropku w deklaracjach właściwości, podczas gdy Evernote używa dwóch spacji do wcięć. Możemy ustawić tyle reguł formatowania, ile nam odpowiada, ale nigdy więcej niż to możliwe.

Deklaracja zamówienia

Zamówione rzeczy są zawsze łatwiejsze do przejrzenia i zamawianie deklaracji CSS (właściwości z ich wartościami) zgodnie z regułą, która ma sens w postaci lepiej zorganizowanego kodu.

Spójrz na przykład na zasady porządkowania właściwości WordPress, definiuje następującą prostą, ale logiczną linię podstawową do porządkowania, w której właściwości są pogrupowane według ich znaczenia:

Pokaz
Pozycjonowanie
Model skrzynki
Kolory i typografia
Inny

Jednostki i wartości

Decydowanie o tym, jak chcemy używać jednostek i wartości jest ważne nie tylko dla uzyskania spójnego wyglądu kodu, ale także, jeśli tego nie zrobimy, możemy skończyć z czymś dziwnym

Wyobraź sobie witrynę, która na przemian używa px, em, i rem pomiary długości. Nie będzie źle wyglądać w edytorze kodu, ale prawdopodobnie niektóre elementy będą zaskakująco małe lub duże na tej stronie.

Musimy również podejmować decyzje dotyczące wartości kolorów (szesnastkowo, rgb lub hsl) oraz tego, czy chcemy używać skrótowych właściwości i zgodnie z którymi regułami. Jest instrukcja, która jest zawarta w każdym przewodniku stylu kodu CSS, na który się natknąłem, tj. nie określaj jednostek dla wartości 0 (naprawdę, po prostu nie).

.class // dobry margines: 0; // zły margines: 0px; // zły margines: 0em; // zły margines: 0rem;

Komentowanie

Kod komentowania jest niezbędny we wszystkich językach, ale w CSS nie tylko ułatwia debugowanie i tworzenie dokumentacji, ale także dzieli reguły CSS na grupy logiczne. Możemy użyć albo / *… * / albo //… styl notacji dla komentarzy w CSS, ważne jest, aby bądź konsekwentny z komentarzami w całym naszym projekcie.

Na przykład idiomatyczny CSS ustanawia znaczący system komentowania, który używa nawet podstawowej sztuki ASCII i daje pięknie zorganizowany kod: