Mi se alătură Dustin Schau în acest videoclip și el mă va face într-un tur al lumii a ceea ce a devenit cunoscut sub numele de CSS-in-JS. Adică, făcându-vă stilul în întregime în JavaScript, mai degrabă decât în .cssfișiere pe care le aveți în cap toate pe cont propriu.
Dustin este un ghid perfect pentru acest lucru, deoarece a creat un instrument explorator excelent numit CSS în JS Playground și are, de asemenea, un curs nou pe această temă.
Dacă sunteți curios de ce cineva ar fi deloc interesat să parcurgă ruta CSS-in-JS, iată câteva motive pe care le discutăm în videoclip:
- Eliminarea codului mort. Singurele stiluri care sunt încărcate sunt stilurile pentru componentele utilizate la un moment dat. Nu se expediază niciun stil neutilizat. Când o componentă moare, la fel și stilurile sale.
- Scoping. Scrierea de stiluri noi nu poate afecta nimic altceva în alte locuri de pe site, așa că nu este nevoie să vă faceți griji cu privire la scrierea unui stil care are consecințe proaste sau neintenționate în altă parte din cauza unui selector din sfera globală. Obținem protecția domeniului de aplicare cu ideologii de numire, cum ar fi BEM, dar nu este impusă de instrumente.
- Denumiri fără griji. În unele cazuri, nu este necesar să alegeți un nume de clasă sau un ID pentru ceea ce este stilat, deoarece ieșirea este conținută de UI.
- Ergonomia dezvoltatorului. Poate fi frumos să ai stiluri în același fișier (sau altfel foarte aproape de) componenta în sine. În același mod, unii dezvoltatori se simt foarte confortabili în JSX. De asemenea, posibilitatea de a stiliza lucrurile fără nicio îngrijorare a scopului înseamnă că dezvoltatorii se pot simți împuterniciți în ceea ce privește stilul, mai degrabă decât intimidați de acesta.
- Sistem de proiectare prietenos. Sistemele de proiectare se referă la componente, la fel și React. Aceste moduri complementare de gândire se aliniază destul de bine unele cu altele.
- Posibilități JavaScript în CSS. Făcând acest lucru cu operatori logici și trecând în valori, matematică și altceva, să ai toată puterea JavaScript în stiluri este foarte util.
Și asta nu este totul, dar puteți vedea de ce este convingător pentru unii oameni. Cu siguranță a inspirat multe discuții. De ce nu atunci când oferă toate aceste beneficii? Ei bine, este un mediu de dezvoltare foarte diferit, care nu face clic neapărat pe toată lumea. Necesită îndoirea platformei web pentru a face lucruri oarecum neobișnuite și asta vine cu negi. Ca să nu mai vorbim că există un cost literal (dimensiunea pachetelor și altele) pe care îl plătesc utilizatorii, pe care ar fi mai bine să speri că îl va plăti cu eficiență.
Dustin a mers atât de departe încât a construit o demonstrație folosind Sass pentru a stiliza lucrurile pentru a o compara cu modul în care se poate face cu CSS-in-JS, ceea ce demonstrează modul în care arată stilurile de portare, precum și posibilitățile de a o face.