Dustin Schau csatlakozik hozzám ebben a videóban, és be fog vezetni egy körútra a CSS-in-JS világába. Vagyis a stílust teljesen JavaScript-ben végezze, nem pedig olyan .cssfájlokban, amelyeket a fejében önmaga alkot.
Dustin tökéletes útmutató ehhez, hiszen a JS Playgroundon létrehozott egy remek felfedező eszközt CSS néven, és vadonatúj tanfolyama is van a témában.
Ha kíváncsi vagy arra, miért érdekelne valakit egyáltalán a CSS-in-JS útvonal, akkor íme néhány ok, amelyet a videón tárgyalunk:
- Holt kód megszüntetése. Az egyetlen stílus, amely betöltött, az adott esetben használt komponensek stílusa. Nincsenek fel nem használt stílusok. Ha egy komponens meghal, akkor a stílusa is.
- Hatókör. Az új stílusok írása nem befolyásolhat mást a webhely más helyein, ezért nem kell aggódnia olyan stílus megírása miatt, amelynek máshol rossz vagy nem szándékos következményei vannak a globális hatókörű választó miatt. A hatókörvédelmet olyan elnevezések ideológiájával kapjuk meg, mint a BEM, de ez nem szerszám-kényszerített.
- Gondtalan névadás. Bizonyos esetekben nincs szükség osztálytípusra vagy azonosítóra a stílushoz, mivel a kimenet UI-t tartalmaz.
- Fejlesztői ergonómia. Szép lehet, ha stílusok vannak ugyanabban a fájlban (vagy más módon nagyon közel vannak) maga az összetevő. Ugyanígy egyes fejlesztők nagyon jól érzik magukat a JSX-ben. Ha a dolgokat bármilyen körültekintő aggodalom nélkül is meg tudják stílusozni, az azt jelenti, hogy a fejlesztők inkább a stílus stílusában érezhetik magukat, nem pedig megfélemlítik.
- Tervezési rendszerbarát. A tervezési rendszerek az alkatrészekről szólnak, és a React is. Ezek a kiegészítő gondolkodásmódok nagyon jól illeszkednek egymáshoz.
- A JavaScript lehetőségei a CSS-ben. Ennek logikai operátorokkal történő elvégzése, valamint értékek és matematika és egyebek továbbadása esetén a JavaScript teljes ereje a stílusokban nagyon hasznos.
És ez még nem minden, de láthatja, miért kényszerít egyes embereket. Ez minden bizonnyal sok vitát váltott ki. Miért ne, ha mindezeket az előnyöket kínálja? Nos, ez egy nagyon eltérő fejlesztői környezet, amely nem feltétlenül kattog mindenkivel. Szükség van a webplatform meghajlítására, hogy kissé szokatlan dolgokat hajtson végre, és ez szemölcsökkel jár. Nem is beszélve arról, hogy szó szerint költségei vannak (a csomagok mérete és hasonlók), amelyet a felhasználók fizetnek, amit jobb, ha reméled, hogy hatékonyan megtérül.
Dustin odáig jutott, hogy a Sass használatával egy demót készített a dolgok megtervezéséhez, összehasonlítva azzal, hogyan lehet a CSS-in-JS-sel megtenni, amely bemutatja, hogyan néznek ki a stílusok és a megvalósítás lehetőségei.