Sono affiancato da Dustin Schau in questo video e mi porterà in un tour del mondo di quello che è diventato noto come CSS-in-JS. Cioè, facendo il tuo stile interamente in JavaScript, piuttosto che in .cssfile che ti vengono in mente da solo.
Dustin è una guida perfetta per questo, poiché ha creato un ottimo strumento esplorativo chiamato CSS in JS Playground e ha anche un corso nuovo di zecca sull'argomento.
Se sei curioso del motivo per cui qualcuno sarebbe interessato a seguire il percorso CSS-in-JS, ecco alcuni motivi che discutiamo nel video:
- Eliminazione del codice guasto. Gli unici stili caricati sono gli stili per i componenti in uso in un dato momento. Non è prevista la spedizione di stili inutilizzati. Quando un componente muore, così fanno i suoi stili.
- Scoping. La scrittura di nuovi stili non può influire su nient'altro in altri punti del sito, quindi non è necessario preoccuparsi di scrivere uno stile che ha conseguenze negative o non intenzionali altrove a causa di un selettore nell'ambito globale. Otteniamo protezione dell'ambito con ideologie di denominazione come BEM, ma non è applicata dagli strumenti.
- Denominazione senza preoccupazioni. In alcuni casi, non è necessario scegliere un nome di classe o un ID per ciò che viene designato poiché l'output è contenuto nell'interfaccia utente.
- Ergonomia dello sviluppatore. Può essere bello avere stili nello stesso file (o comunque molto vicini) al componente stesso. Allo stesso modo, alcuni sviluppatori si sentono a proprio agio in JSX. Inoltre, essere in grado di modellare le cose senza alcuna preoccupazione per la definizione dell'ambito significa che gli sviluppatori possono sentirsi autorizzati a disegnare piuttosto che intimiditi da esso.
- Sistema di progettazione amichevole. I sistemi di progettazione riguardano tutti i componenti, così come React. Questi modi di pensare complementari si allineano abbastanza bene l'uno con l'altro.
- Possibilità di JavaScript nei CSS. Facendo ciò con operatori logici e passando valori, matematica e quant'altro, avere tutta la potenza di JavaScript negli stili è molto utile.
E non è tutto, ma puoi capire perché è convincente per alcune persone. Sicuramente ha ispirato molte discussioni. Perché non quando offre tutti questi vantaggi? Bene, è un ambiente di sviluppo molto diverso che non necessariamente fa clic con tutti. È necessario piegare la piattaforma web per fare cose insolite e questo viene fornito con le verruche. Per non parlare del costo letterale (dimensione dei pacchetti e simili) che gli utenti pagano, che faresti meglio a sperare si ripaghi da solo con efficienza.
Dustin è arrivato al punto di creare una demo usando Sass per dare uno stile alle cose per confrontarlo con come può essere fatto con CSS-in-JS, il che dimostra come appaiono gli stili di porting e le possibilità di farlo.