MARGO

Aktualności

Dlaczego warto zacząć używać styled-components? Bezstresowe stylowanie z nowoczesną technologią

Autor: Santana Kwaśniewska Software Engineer

Każdy programista stale szuka nowych sposobów na ulepszanie swojej aplikacji, tak aby jak najlepiej spełniała ona wymagania użytkowników, ale także była łatwa w rozwijaniu i utrzymaniu. Bardzo popularnym trendem wspierającym rozwój jest łączenie CSS z JS. W podejściu CSS-in-JS style, JavaScript oraz szablon są ze sobą ściśle powiązane i powinny być traktowane jak swego rodzaju całość. W dobie frameworków JS, w których zrezygnowano z kodowania w HTML prawie całkowicie na rzecz szablonów projektowanych bezpośrednio w JS, użycie rozwiązania CSS-in-JS wydaje się być uzasadnione. Bardzo łatwym i przyjemnym sposobem na zapoznanie się i polubienie tego podejścia jest biblioteka styled-components często używana w aplikacjach napisanych w React.

Czym jest styled-components?

Styled components (www.style-compotens.com) to biblioteka, która korzysta ze stringów interpolowanych wprowadzonych w wersji JavaScript ES6. Pozwala ona na bardzo proste stylowanie komponentów React poprzez dodanie stylów bezpośrednio do komponentu.

Oto przykład kodu styled-components:

StyledTile zostało zdefiniowane jako zmienna, w której style CSS „podajemy” w backtickach. Aby komponent Tile przejął style StyledTile, wystarczy dołączyć nasz styled-component do klasy Tile – tak jak każdy inny komponent. Styled components oprócz prostego CSS posiadają również wiele innych cech ułatwiających pracę, o których mowa później.

 

Budowanie niestandardowych komponentów przy użyciu CSS

Przy użyciu styled-components przestajemy ograniczać się do definiowania stylów przypisanych wyłącznie do danej klasy CSS. Zamiast tego style dołączane są do konkretnego komponentu, który dzięki temu staje się łatwo reużywalny w całej aplikacji.

Przechodzimy więc z tego:

Na to:

W tym przypadku style stają się nieodłączną częścią komponentu. W efekcie niegdyś kluczowa rola CSS – mapowanie między stylami a komponentami – przestała być ważna. Jednocześnie styled-components używają składni CSS, a zatem praca z nimi jest w dużej mierze czymś, co już dobrze znamy i zapewne wszyscy bardzo lubimy.

Stylowanie ‘inline’ w ulepszonej wersji

Stylowanie ‘inline’ nie cieszy się dużym poparciem wśród programistów front-end. Dzieje się tak między innymi dlatego, że nie pozwala ono na używanie przydatnych pseudoklas czy ‘media queries’. Te drugie są szczególnie ważne, ponieważ obecnie coraz więcej użytkowników przegląda strony internetowe przy użyciu urządzeń mobilnych. Styled components „produkują” coś na kształt stylów ‘inline’, lecz w sposób eliminujący wszelkie problemy pozwiązane z tym stylowaniem.

Prosty przykład stylów ‘inline’:

Co kompiluje się do:

Gdy ostylujemy ten sam element przy użyciu styled-components:

Co kompiluje się do:

Widzimy, że przy styled-components tak naprawdę nie używamy stylów ‘inline’, a otrzymujemy tag <style> z pełnym dostępem do wszystkich smaczków CSS. Nie musimy się martwić o ‘media queries’!

 

Style dla konkretnego komponentu

Styled components pozwalają na prostą zmianę stylów danego komponentu bez stworzenia przy tym ogromnego bałaganu. Dla osób posługujących się CSS – szczególnie tych nowych w świecie stylowania – zmiana kodu dla jednej klasy potrafi zepsuć inny element lub klasę, nawet te, które wydawałoby się nie mają nic wspólnego z tą zmienianą. Ponieważ styled components opierają się na stylach jako nieodłącznym elemencie danego komponentu, nie wystąpią tutaj takie problemy jak przy CSS, a więc poradzi z tym sobie nawet mniej doświadczona osoba.

 

Używanie ‘props’ zamiast klas CSS

Bardzo często styl danego komponentu zależy od tego, jak zachowa się on w konkretnym momencie lub w którym miejscu aplikacji się znajduje.

Wcześniej radziliśmy sobie z tym za pomocą klas CSS, co w efekcie potrafiło kończyć się kodem podobnym do tego:

W styled-components używamy ‘props’ Reacta, czyli właściwości komponentu odpowiadających za jego zachowanie.

Od razu widzimy tutaj bardzo przejrzyste połączenie pomiędzy zachowaniem a stylami:

Przy okazji wykonywania takich operacji warto również zapoznać się z mini-biblioteką styled-is (https://github.com/yldio/styled-is). Okazuje się ona bardzo pomocna przy sprawdzaniu ‘propsów’.

 

Sass i styled-components

Sass jest aktualnie bardzo popularny i chyba każdy zgodzi się ze stwierdzeniem, że większość programistów front-end nie wyobraża sobie bez niego CSSa. Na szczęście osoby tworzące styled-components wiedzą, że nie chcielibyśmy rezygnować z tak ważnej części naszej pracy.

Biblioteka ta w pełni wspiera zagnieżdżanie klas czy pseudoklasy z ‘&’:

 

Podsumowanie

Biblioteka styled-components jest coraz powszechniej używana patrząc na to, co oferuje, nie bez powodu. Perspektywa łatwiejszego stylowania i bezproblemowego rozwijania CSS w naszej aplikacji , a także pilnowania ‘best practices’ brzmi bardzo zachęcająco i takie też są  styled-components. Mam nadzieję, że dacie szansę tej bibliotece i pokochacie ją tak samo jak ja.


Autor: Santana Kwaśniewska Software Engineer