W tym filmie towarzyszy mi Dustin Schau, który zabierze mnie w podróż po świecie, który stał się znany jako CSS-in-JS. Oznacza to, że stylizacja jest wykonywana wyłącznie w języku JavaScript, a nie w .cssplikach, które sam tworzysz w głowie.
Dustin jest do tego doskonałym przewodnikiem, ponieważ stworzył świetne narzędzie eksploracyjne o nazwie CSS w JS Playground, a także ma zupełnie nowy kurs na ten temat.
Jeśli jesteś ciekawy, dlaczego ktokolwiek miałby w ogóle interesować się ścieżką CSS-in-JS, oto kilka powodów, które omówimy w filmie:
- Eliminacja martwego kodu. Jedyne style, które są ładowane, to style komponentów używanych w danym momencie. Nie ma wysyłki żadnych nieużywanych stylów. Kiedy komponent umiera, to samo dzieje się z jego stylami.
- Zakres. Pisanie nowych stylów nie może wpływać na nic innego w innych miejscach w witrynie, więc nie musisz się martwić o pisanie stylu, który ma złe lub niezamierzone konsekwencje w innym miejscu ze względu na selektor w zakresie globalnym. Otrzymujemy ochronę zakresu dzięki ideologiom nazewnictwa, takim jak BEM, ale nie jest to wymuszane narzędziami.
- Bezproblemowe nazewnictwo. W niektórych przypadkach nie ma potrzeby wybierania nazwy lub identyfikatora klasy dla tego, co jest stylizowane, ponieważ dane wyjściowe zawierają interfejs użytkownika.
- Ergonomia programisty. Dobrze jest mieć style w tym samym pliku (lub bardzo blisko) samego komponentu. W ten sam sposób niektórzy programiści czują się bardzo dobrze w JSX. Możliwość stylizacji rzeczy bez obaw o zakres oznacza, że programiści mogą czuć się wzmocnieni podczas stylizacji, a nie onieśmieleni.
- Projekt przyjazny dla systemu. Systemy projektowania dotyczą komponentów, podobnie jak React. Te uzupełniające się sposoby myślenia dość dobrze do siebie pasują.
- Możliwości JavaScript w CSS. Robiąc to za pomocą operatorów logicznych, przekazując wartości i matematykę i tak dalej, pełne możliwości JavaScript w stylach są bardzo przydatne.
I to nie wszystko, ale możesz zobaczyć, dlaczego jest to atrakcyjne dla niektórych osób. Z pewnością wywołało to wiele dyskusji. Dlaczego nie, skoro oferuje wszystkie te korzyści? Cóż, jest to zupełnie inne środowisko programistyczne, które niekoniecznie pasuje do wszystkich. Wymaga wyginania platformy internetowej, aby robić niecodzienne rzeczy, a to wiąże się z brodawkami. Nie wspominając o tym, że wiąże się to z kosztami (rozmiarami pakietów itp.), Za które płacą użytkownicy, a miejmy nadzieję, że spłaci się wydajnością.
Dustin posunął się tak daleko, że zbudował demo, używając Sassa do stylizacji rzeczy, aby porównać je z tym, jak można to zrobić za pomocą CSS-in-JS, co pokazuje, jak wygląda portowanie stylów, a także możliwości robienia tego.