Cut the SASS: come utilizzare gli stili JavaScript incorporati per tutto.

Oggi, lo sviluppo Web front-end riguarda la creazione di applicazioni, non solo le pagine Web. E mentre CSS e SASS erano entrambi fantastici per le pagine di stile, non sono adatti per le applicazioni di stile. Ciò è particolarmente vero se si sta costruendo con una strategia basata su componenti.

Una strategia basata sui componenti è l'idea di suddividere l'applicazione in piccoli blocchi riutilizzabili chiamati componenti. L'uso dei componenti per creare la tua app può portare riusabilità, chiarezza ed efficienza al tuo front-end.

Per ottenere tutti i vantaggi di un approccio basato sui componenti, desideriamo componenti che incapsulino completamente la funzione, il markup e gli stili.

In questo post esploreremo come gli stili di scrittura usando JavaScript inline siano un ottimo modo per supportare lo sviluppo basato su componenti. Alla fine, finiremo con componenti front-end che sono un singolo file, facilmente condivisibili e completamente autonomi.

Scrivere i tuoi stili in JS è un grande cambiamento, quindi voglio dedicare del tempo a spiegare perché vorremmo farlo. Credo nella scelta dello strumento giusto per il lavoro giusto. SASS era certamente lo strumento giusto per il suo tempo, offrendo alcuni grandi vantaggi come:

  • annidamento
  • variabili
  • mixins

La nidificazione è stata un grande vantaggio perché ha permesso ai tuoi stili di riflettere il tuo markup. Se tu avessi:

Potresti fare:

Questo vantaggio non è più utile. Siamo ancora molto interessati ad avere i nostri stili che rispecchiano il nostro markup, ma il nostro markup è cambiato!

Oggi, usando un approccio basato sui componenti, preferiamo separarli in due componenti distinti chiamati `UserList` e` User`. Il risultato sono due file, in cui `UserList` conterrebbe una serie ripetuta di` User`.

Dal momento che stiamo suddividendo la nostra applicazione in componenti, dovremmo scrivere i nostri stili usando la stessa strategia. Ciò significa che dovremmo tentare di localizzare i nostri stili con il markup dei nostri componenti in modo che vengano incapsulati insieme.

Un modo per ottenere questo risultato è usare gli stili in linea, come ai vecchi tempi prima dei fogli di stile a cascata.

Questo metodo classico è molto ben allineato con un approccio basato sui componenti. Non lo useremo, perché è molto limitante, ma dimostra i principi che stiamo cercando in una soluzione di stile moderna.

Variabili e Mixin

Abbiamo parlato della nidificazione di SASS, e degli altri grandi vantaggi: variabili e mixin?

Bene, è proprio così che esiste un'altra soluzione abbastanza popolare per quelli: JavaScript!

Non sarebbe bello se potessimo sfruttare le caratteristiche naturali di JavaScript per `var` e` function` per darci ciò di cui abbiamo bisogno in una soluzione di styling? Se usiamo JavaScript per scrivere i nostri stili, otteniamo la flessibilità, la potenza e la familiarità che amiamo di JS. Più! Il nostro intero componente può essere composto in una sola lingua! E anche un singolo file!

I nostri obiettivi

Ecco cosa vogliamo fare:

  • Componi i nostri stili direttamente insieme al markup
  • variabili `import` ed` export` come colori o punti di interruzione
  • Scrivi stili "dinamici" in base allo stato (menu aperto / chiuso, ecc.)

Ecco alcuni altri requisiti:

  • Deve coprire pseudo stati come `: hover,: before,: after`
  • Deve supportare direttamente media-query come `@media (larghezza massima: 600px)`
  • Consenti funzioni / ternari (vedi dinamico, sopra)

Nota a margine: spiegazione della differenza tra "stili JS" e "CSS in JS"

Esistono due approcci distinti:

  • Puoi includere CSS nel tuo JS
  • Puoi scrivere il tuo CSS usando JS

Preferisco il secondo metodo ed è quello che tratteremo qui.

Per il primo approccio, i moduli CSS sono una soluzione popolare nella categoria "Scrivi CSS nel tuo JS". Scopre, o spazi dei nomi, il normale CSS che scrivi nel componente

`. La spaziatura dei nomi è qualcosa che puoi fare manualmente con classi o ID e non è motivo sufficiente per usare qualcosa del genere da solo. Per supporto variabile o mixin, è necessario utilizzare un "potenziatore" CSS come PostCSS o SASS con moduli CSS.

Ancora una volta, vogliamo essere in grado di sfruttare JavaScript per le funzionalità del linguaggio, tra cui variabili, ternari o funzioni. Se la nostra soluzione ci costringe a scrivere una sorta di CSS "avanzato" anziché JS, non funzionerà per le nostre esigenze.

Ci sono molte soluzioni css-in-js disponibili per entrambi gli approcci. Dai un'occhiata! Per ora, implementeremo ciò che ho trovato funziona meglio per risolvere i nostri obiettivi e requisiti.

Iniziamo!

Useremo:

  • ES6 trasformato da Babele
  • Reagisci per rendere il nostro markup
  • Afrodite per creare CSS da JS scriviamo.

Innanzitutto, creeremo un componente semplice, chiamato UserMenu. Avrà un piccolo avatar utente e un menu che scende quando lo fai clic.

Puoi usarlo sulla tua pagina dell'app come:

Il markup non è importante. Questo è solo React di base o anche AngularJS con una piccola sintassi dei componenti funzionali ES6 / stateless.

Iniziamo lo styling! Inizia includendo Afrodite.

Qui, stiamo importando le funzioni specifiche di cui abbiamo bisogno da Afrodite come indicato dai documenti.

Nota sulle importazioni: stiamo importando riferimenti specifici con "import {bar} dalla sintassi" pippo ". Ulteriori informazioni sulla documentazione di importazione MDN

Ora abbiamo scritto un `const styles` e usiamo` StyleSheet.create () `con il nostro oggetto styles all'interno. Questo è dalla documentazione di Afrodite. Aphrodite inietta un tag `