V tomto videu sa ku mne pripojil Dustin Schau a on ma vezme na prehliadku sveta známeho ako CSS-in-JS. To znamená, že svoj styling robíte výlučne v JavaScripte, a nie v .csssúboroch, ktoré ste si vytvorili sami.
Dustin je na to dokonalým sprievodcom, pretože vytvoril skvelý prieskumný nástroj s názvom CSS v JS Playground a má k dispozícii aj úplne nový kurz na túto tému.
Ak ste zvedaví, prečo by mal niekto vôbec záujem ísť cestou CSS-in-JS, tu je niekoľko dôvodov, o ktorých hovoríme vo videu:
- Eliminácia mŕtveho kódu. Načítajú sa iba štýly pre použité komponenty v danom okamihu. Nepoužijú sa žiadne nepoužívané štýly. Keď komponent zomrie, zaniknú aj jeho štýly.
- Scoping. Písanie nových štýlov nemôže ovplyvniť nič iné na iných miestach webu, takže sa nemusíte starať o písanie štýlu, ktorý má inde zlé alebo neúmyselné následky v dôsledku selektora v globálnom rozsahu. Získame ochranu rozsahu pomenovaním ideológií ako BEM, ale nie je to vynútené nástrojmi.
- Bezstarostné pomenovanie. V niektorých prípadoch nie je potrebné vyberať názov triedy alebo ID toho, čo sa upravuje, pretože výstup obsahuje používateľské rozhranie.
- Ergonómia vývojárov. Môže byť pekné mať štýly v rovnakom súbore (alebo veľmi blízko) samotného komponentu. Rovnako sa niektorí vývojári cítia v JSX veľmi dobre. Schopnosť upravovať veci bez obáv z obmedzení tiež znamená, že vývojári môžu mať pocit, že majú problém so štýlovaním, a nie že by sa ich zľakli.
- Dizajnový systém priateľský. Dizajnové systémy sú predovšetkým o komponentoch, a teda aj React. Tieto doplnkové spôsoby myslenia sa navzájom celkom dobre zosúlaďujú.
- Možnosti JavaScriptu v CSS. Robiť to s logickými operátormi a odovzdávať hodnoty, matematické a iné, mať plný výkon JavaScriptu v štýloch je veľmi užitočné.
A to nie je všetko, ale môžete vidieť, prečo je to pre niektorých ľudí príťažlivé. Určite to podnietilo veľa diskusií. Prečo nie, keď ponúka všetky tieto výhody? Je to veľmi odlišné vývojové prostredie, ktoré nemusí nevyhnutne klikať u každého. Vyžaduje si ohýbanie webovej platformy, aby dokázala urobiť niečo neobvyklé, a to prichádza s bradavicami. Nehovoriac o tom, že to stojí doslova (veľkosť balenia a podobne), ktoré používatelia platia, a dúfajme, že sa za to efektívne zaplatí.
Dustin zašiel tak ďaleko, že pomocou programu Sass vytvoril demo na úpravu vecí, aby ho porovnal s tým, ako sa to dá urobiť pomocou CSS-in-JS, čo demonštruje, ako vyzerajú štýly portovania, ako aj možnosti ich uskutočnenia.