Jeszcze kilka lat temu powszechną praktyką tworzenia aplikacji front-endowych było stosowanie jednego dużego pliku stylów CSS bez określonej struktury. Powodowało to szereg problemów, takich jak:

• Nieoczekiwane wprowadzanie regresji, gdy zmieniano kod o niskiej specyficzności
• Ogólny bałagan i problemy w nawigacji w dużym pliku stylów
• Pojawianie się duplikacji selektorów
• Konieczność powtarzania tego samego kodu4

Dzięki zastosowaniu takich konwencji i technologii, jak Bem, Sass czy enkapsulacja stylów, stylowanie staje się łatwiejsze. W tym artykule opiszę pokrótce konwencje i technologie, pomagające w pracy front-end dewelopera.

BEM – logiczna struktura CSS

CSS umożliwia niemal dowolne odwoływanie się do elementów HTML na stronie. Prowadzi to do wielu złych praktyk, takich, jak stylowanie po ID, używanie zagnieżdżonych selektorów czy brak spójności w stylowaniu podobnych elementów. Brak wyodrębnionej struktury powoduje konieczność stosowania kolejnych doraźnych rozwiązań, na przykład stylowanie z użyciem !important.

Rozwiązaniem tego problemu jest wprowadzenie spójnego systemu nazewnictwa.

BEM to konwencja, która w jasny sposób definiuje, jak mają być stylowane elementy. Polega onana tym, że sekcje strony dzielimy na bloki, elementy oraz ich wariacje, czyli modyfikatory i następnie stylujemy je według ustalonej konwencji, dbając o jak najniższą specyficzność. Nie używa się stylowania po id lub po tagach.

Wprowadzenie tej konwencji ułatwia wprowadzanie zmian w kodzie – deweloper wie, gdzie ma spodziewać się określonego stylu i jak dodawać kolejne. BEM to także tworzenie spójnej przestrzeni nazw, uniemożliwiającej “wyciekanie stylów” w nieoczekiwanych miejscach. W kodzie nie pojawiają się problematyczne fragmenty o bardzo wysokiej specyficzności, które trzeba następnie nadpisywać.

Sass – unikamy duplikacji

Jedną z cech konwencji BEM jest konieczność stosowania długich nazw klas. Sass to preprocesor CSS, który umożliwia zagnieżdżanie kodu, wpływa na skrócenie kodu i poprawienie jego czytelności oraz struktury, co pomaga pozbyć się tego problemu. Sprawdza się także, gdy nie używamy BEM. Inne zalety Sass to:

• Możliwość wydzielania i importowania plików CSS. Dzięki temu, możliwe jest wydzielenie plików na przykład dla używanych kolorów, zmiennych czy czcionek. Przekłada się to na mniejszą objętość plików i łatwiejszą nawigację
• Reużywanie kodu za pomocą mixinów. Mixin to fragment często powtarzanego kodu, który można zaimportować w dowolnym miejscu. Przykładowo, można wyodrębnić kod odpowiadający za zaokrąglenia rogów, ustawianie breakpointów czy czcionek
• Funkcje – pozwalają na wykonywanie obliczeń i unikanie wielokrotnego pisania podobnego kodu

Konfiguracja Sass jest bardzo prosta, a w przypadku projektów w Angularze, jest on zainstalowany i skonfigurowany domyślnie. Istnieją również wtyczki do edytorów kodu (np. opisany poniżej Stylelint) współpracujące z Sass, które informują programistę , np. o zduplikowanym selektorze lub o zbyt wysokiej specyficzności kodu.

Stylelint – dbamy o porządek

CSS pozwala na dowolność w tworzeniu kodu, co prowadzi do powstania rozwiązań trudnych w zrozumieniu i utrzymaniu. Problemem może być też niespójność konwencji dotyczących, np. definiowania kolorów, jednostek numerycznych, wyrównania kodu.

Stylelint wymusza na nas dostosowanie się do reguł, poprawiając czytelność i przewidywalność kodu. Informuje nas także o błędach w CSS, zanim jeszcze zaczniemy testować kod w przeglądarce. Reguły używane przez wtyczkę mogą być zmieniane przez członków teamu i następnie współdzielone. Za pomocą Git Hooks można ustalić, że kod niespełniający wymagań określonych przez Stylelint, nie może zostać scommitowany.

Enkapsulacja – wyizolowane style dla komponentów

Enkapsulacja to technika używana domyślnie w aplikacjach tworzonych za pomocą frameworka Angular. W dużym skrócie, zapewnia ona, że styl wykorzystywany w jednym komponencie, nie będzie wykorzystany w innych komponentach.

Zaletą tej techniki jest zapewnienie, że nie wprowadzimy nieświadomie zmian w innych miejscach aplikacji, chyba, że świadomie nadpiszemy tę regułę lub wyłączymy enkapsulację.

Wdrożenie technologii i konwencji, upraszcza pracę ze stylami oraz praktycznie wyklucza wprowadzenie regresji opisanej we wstępie. Kod staje się spójny, czytelniejszy i łatwiejszy w utrzymaniu.