5-minutowe wprowadzenie do stylizowanych komponentów

CSS jest dziwny. Możesz się tego nauczyć w 15 minut. Ale może minąć wiele lat, zanim wymyślisz dobry sposób na uporządkowanie swoich stylów.

Częściowo wynika to z dziwactwa samego języka. Po wyjęciu z pudełka CSS jest dość ograniczony, bez zmiennych, pętli ani funkcji. Jednocześnie pozwala na stylizowanie elementów, klas, identyfikatorów lub dowolnej ich kombinacji.

Chaotyczne arkusze stylów

Jak zapewne sam doświadczyłeś, często jest to przepis na chaos. I chociaż preprocesory, takie jak SASS i LESS, dodają wiele przydatnych funkcji, tak naprawdę nie robią wiele, aby powstrzymać anarchię CSS.

Zadanie organizacyjne pozostawiono metodologiom takim jak BEM, które - choć przydatne - są całkowicie opcjonalne i nie można ich egzekwować na poziomie języka ani narzędzi.

Nowa fala CSS

Kilka lat wstecz, a nowa fala narzędzi opartych na JavaScript próbuje rozwiązać te problemy u podstaw, zmieniając sposób pisania CSS.

Styled Components to jedna z tych bibliotek, która szybko przyciągnęła wiele uwagi dzięki mieszance innowacji i znajomości. Więc jeśli używasz React (a jeśli nie, sprawdź mój plan nauki JavaScript i moje wprowadzenie do React), zdecydowanie warto spojrzeć na tę nową alternatywę CSS.

Niedawno użyłem go do przeprojektowania mojej osobistej strony, a dziś chciałem podzielić się kilkoma rzeczami, których nauczyłem się w tym procesie.

Komponenty, stylizowane

Najważniejsze, co musisz zrozumieć o komponentach stylizowanych, to to, że jego nazwa powinna być traktowana dosłownie. Nie projektujesz już elementów ani komponentów HTML na podstawie ich klasy lub elementu HTML:

Hello World

h1.title {
  rozmiar czcionki: 1,5 em;
  kolor fioletowy;
}

Zamiast tego definiujesz komponenty w stylu, które posiadają własne style zamknięte. Następnie używasz ich swobodnie w całej bazie kodu:

importuj stylizację z „styled-components”;
const Tytuł = styled.h1`
  rozmiar czcionki: 1,5 em;
  kolor fioletowy;
`;
 Hello World 

Może się to wydawać niewielką różnicą, aw rzeczywistości obie składnie są bardzo podobne. Ale kluczową różnicą jest to, że style są teraz częścią ich elementu.

Innymi słowy, pozbywamy się klas CSS jako kroku pośredniego między komponentem a jego stylami.

Jak mówi współtwórca stylizowanych komponentów Max Stoiber:

„Podstawową ideą stylowanych komponentów jest egzekwowanie najlepszych praktyk poprzez usunięcie mapowania między stylami i komponentami”.

Rozładowanie złożoności

Na początku będzie to wydawać się sprzeczne z intuicją, ponieważ cały sens używania CSS zamiast bezpośredniego stylowania elementów HTML (pamiętasz znacznik ?) Polega na rozłączeniu stylów i znaczników poprzez wprowadzenie tej warstwy klasy pośredniej.

Ale to oddzielenie powoduje również wiele komplikacji i należy postawić argument, że w porównaniu z CSS „prawdziwy” język programowania, taki jak JavaScript, jest znacznie lepiej przygotowany do obsługi tej złożoności.

Rekwizyty ponad klasami

Zgodnie z filozofią braku klas styled-components wykorzystuje rekwizyty zamiast klas, jeśli chodzi o dostosowanie zachowania komponentu. Więc zamiast:

Hello World

// będzie niebieski
h1.title {
  rozmiar czcionki: 1,5 em;
  kolor fioletowy;
  
  &.podstawowy{
    kolor niebieski;
  }
}

Pisałbyś:

const Tytuł = styled.h1`
  rozmiar czcionki: 1,5 em;
  kolor: $ {props => props.primary? 'niebieski fioletowy'};
`;
 Hello World  // będzie niebieski

Jak widać, komponenty styled pozwalają oczyścić komponenty React, nie dopuszczając do nich wszystkich szczegółów implementacji związanych z CSS i HTML.

To powiedziawszy, stylizowane komponenty CSS to wciąż CSS. Takie rzeczy są również całkowicie poprawnym (choć nieco nie idiomatycznym) kodem:

const Tytuł = styled.h1`
  rozmiar czcionki: 1,5 em;
  kolor fioletowy;
  
  &.podstawowy{
    kolor niebieski;
  }
`;
 Hello World  // będzie niebieski

Jest to jedna cecha, która sprawia, że ​​stylowe komponenty są bardzo łatwe: w razie wątpliwości zawsze możesz wrócić do tego, co wiesz!

Ostrzeżenia

Należy również wspomnieć, że komponenty w stylu są wciąż młodym projektem i że niektóre funkcje nie są jeszcze w pełni obsługiwane. Na przykład, jeśli chcesz nadać styl komponentowi podrzędnemu od rodzica, musisz na razie polegać na użyciu klas CSS (przynajmniej do momentu wydania styled-components v2).

Nie ma jeszcze „oficjalnego” sposobu wstępnego renderowania CSS na serwerze, chociaż zdecydowanie jest to możliwe poprzez ręczne wstrzyknięcie stylów.

A fakt, że komponenty stylizowane generują własne losowe nazwy klas, może utrudnić korzystanie z narzędzi programistycznych przeglądarki w celu ustalenia, gdzie style są pierwotnie zdefiniowane.

Ale bardzo zachęcające jest to, że zespół podstawowy stylizowanych komponentów jest świadomy wszystkich tych problemów i ciężko pracuje nad ich rozwiązywaniem jeden po drugim. Wersja 2 już wkrótce i naprawdę nie mogę się doczekać!

Ucz się więcej

Moim celem nie jest tutaj szczegółowe wyjaśnienie działania stylizowanych komponentów, ale więcej, aby dać ci mały wgląd, abyś sam mógł zdecydować, czy warto to sprawdzić.

Jeśli udało mi się cię zainteresować, oto kilka miejsc, w których możesz dowiedzieć się więcej o stylizowanych komponentach:

  • Max Stoiber napisał ostatnio artykuł o przyczynach stylizacji komponentów w Smashing Magazine.
  • Repozytorium komponentów stylizowanych ma obszerną dokumentację.
  • W tym artykule Jamie Dixon przedstawiono kilka korzyści przejścia na stylizowane komponenty.
  • Jeśli chcesz dowiedzieć się więcej o tym, jak biblioteka jest faktycznie implementowana, sprawdź ten artykuł autorstwa Maxa.

A jeśli chcesz pójść jeszcze dalej, możesz także sprawdzić Glamour, inną wersję CSS nowej fali!

Czas autopromocji: szukamy współpracowników o otwartym kodzie źródłowym, którzy pomogą w Nova, najłatwiejszym sposobie tworzenia aplikacji React i GraphQL z pełnym stosem wraz z formularzami, ładowaniem danych i kontami użytkowników. Nie używamy jeszcze stylizowanych komponentów, ale możesz być pierwszym, który je wdroży!