V tomto videu se ke mně připojil Dustin Schau a vezme mě na prohlídku světa, který se stal známým jako CSS-in-JS. To znamená, že děláte svůj styl výhradně v JavaScriptu, spíše než v .csssouborech, které si sami vytvoříte v hlavě.
Dustin je k tomu dokonalým průvodcem, protože vytvořil skvělý průzkumný nástroj s názvem CSS v JS Playground a má také zcela nový kurz na toto téma.
Pokud jste zvědaví, proč by někdo měl zájem vůbec jít cestou CSS-in-JS, zde je několik důvodů, o kterých diskutujeme ve videu:
- Odstranění mrtvého kódu. Jediné načtené styly jsou styly pro používané komponenty v daném okamžiku. Nepoužijete žádné nepoužívané styly. Když součást zemře, stejně tak i její styly.
- Scoping. Psaní nových stylů nemůže ovlivnit nic jiného na jiných místech webu, takže se nemusíte starat o psaní stylu, který má špatné nebo nezamýšlené důsledky jinde kvůli selektoru v globálním rozsahu. Dostáváme ochranu rozsahu s pojmenováním ideologií jako BEM, ale není to vynucováno nástroji.
- Bezstarostné pojmenování. V některých případech není nutné vybrat název třídy nebo ID pro to, co se styluje, protože výstup obsahuje uživatelské rozhraní.
- Ergonomie vývojáře. Může být hezké mít styly ve stejném souboru (nebo jinak velmi blízkém) samotné komponentě. Stejným způsobem se někteří vývojáři cítí v JSX velmi dobře. Také schopnost stylovat věci bez obav z obtěžování znamená, že se vývojáři mohou cítit zmocněni ohledně stylingu, než aby se jím zastrašovali.
- Přátelský designový systém. Konstrukční systémy jsou o komponentách, stejně jako React. Tyto doplňkové způsoby myšlení se navzájem docela dobře sladí.
- Možnosti JavaScriptu v CSS. Dělat to s logickými operátory a předávat hodnoty a matematiku a co ne, mít plný výkon JavaScriptu ve stylech je spousta užitečných.
A to není všechno, ale vidíte, proč je to pro některé lidi přesvědčivé. Určitě to inspirovalo mnoho diskusí. Proč ne, když nabízí všechny tyto výhody? Je to velmi odlišné vývojové prostředí, které nemusí nutně klikat u každého. Vyžaduje ohýbání webové platformy, aby dokázalo dělat něco neobvyklého, a to přichází s bradavicemi. Nemluvě o tom, že za to stojí doslova náklady (velikost balíčků atd.), Za které uživatelé platí, a doufejte, že se efektivně zaplatí za sebe.
Dustin zašel tak daleko, že pomocí Sass vytvořil demo, aby vytvořil styly, aby jej porovnal s tím, jak to lze udělat pomocí CSS-in-JS, což ukazuje, jak portovací styly vypadají a jaké jsou možnosti.