CSS-in-JS è un nuovo approccio allo stile in cui JavaScript viene utilizzato per generare CSS per i componenti. Fornisce numerosi vantaggi, come l’astrazione dei CSS al livello del componente stesso e la capacità di descrivere gli stili in modo dichiarativo e gestibile. Questo articolo presenterà alcuni dei vantaggi di CSS-in-JS, elencherà alcune librerie popolari e ne dimostrerà l’utilizzo utilizzando il JSS strumento di creazione.

Framework di applicazioni Web e CSS-in-JS

Angolare, Reagire, Vuee altri framework sono tutti basati su moduli chiamati “componenti” da cui è possibile creare un’intera applicazione a pagina singola (SPA). Un componente è in genere un elemento dell’interfaccia utente come un pulsante, un popup o una barra di navigazione. Devi solo creare un componente una volta e puoi riutilizzarlo in tutta l’applicazione. L’architettura modularizzata delle moderne app Web ha reso lo stile più impegnativo di un tempo. A causa della natura a cascata di Fogli di stile a cascata (CSS), i fogli di stile possono essere caricati in qualsiasi ordine e sovrascriversi a vicenda in una varietà di combinazioni impreviste. Un altro problema nelle moderne app Web è che è estremamente difficile gestire le dipendenze una volta che l’app Web modulare raggiunge anche un livello di complessità moderato.

È qui che entrano in gioco le librerie CSS-in-JS. CSS-in-JS raggruppa ciascuna JavaScript componente con tutte le regole e le dipendenze CSS associate. Di conseguenza, i componenti possono essere eseguiti in modo indipendente, senza fare affidamento su alcun file CSS esterno. CSS-in-JS offre molti altri vantaggi, tra cui:

• Sfruttando tutta la potenza di JavaScript per supportare uno stile molto dinamico.
• Selettori con ambito: CSS ha un solo spazio dei nomi globale, quindi è praticamente impossibile evitare collisioni del selettore in applicazioni non banali. CSS-in-JS genera nomi di classe univoci (a meno che non siano stati deliberatamente sovrascritti) quando viene compilato in CSS.
• Le regole CSS sono automaticamente prefissate dal fornitore, quindi sviluppatori/utenti non devono pensarci.
• Condivisione del codice: costanti e funzioni sono facilmente condivisibili tra JavaScript e CSS.
• Solo gli stili attualmente in uso sugli schermi degli utenti sono nel DOM.

Leggere: Come utilizzare i selettori CSS di JavaScript

Due tipi di librerie CSS-in-JS

Alcune librerie CSS-in-JS sono specificamente adattate al framework React. Questi includerebbero Styled JSX, styled-components e Stitches. Molte altre librerie sono indipendenti dal framework, il che le rende abbastanza facili da integrare in qualsiasi progetto, sia costruito utilizzando un framework basato su componenti come Angular, sia anche JavaScript vanilla. Emotion, Treat, TypeStyle, Fela, JSS e Goober sono tutti esempi di librerie indipendenti dal framework.

Utilizzo di JSS per lo stile di un componente angolare

Per avere un assaggio di CSS-in-JS in azione, eseguiremo il refactoring del file Utilizzo di un servizio angolare per leggere le variabili Sass Demo usando il Libreria JSS. Non riscriveremo il servizio colore né toccheremo nulla nel componente principale dell’app. Piuttosto, concentreremo i nostri sforzi sul componente feed, che riceve i suoi colori come parametri di input. In quanto tale, il suo CSS è in qualche modo minimo, ma anche dinamico, poiché i colori possono essere selezionati dall’utente:

In questo tutorial di sviluppo Web, gli sviluppatori convertiranno l’app per utilizzare JSS. Quindi, nella prossima puntata, implementeremo l’aggiornamento dinamico delle regole.

Leggere: Strumenti e librerie HTML, CSS e JavaScript

Gli stili Oggetto in JSS

Proprio come CSS e SCSS, ha ancora senso inserire gli stili nel proprio file. In questo caso, lo chiameremo feed.component.styles.ts e mettilo nella stessa cartella degli altri file del componente feed. Governa l’aspetto di News Image SVG, che in precedenza era di competenza del feed.component.scss file. CSS-in-JS, in particolare JSS, definisce i suoi stili in modo molto simile a SaSS. Ad esempio, supporta la nidificazione (almeno con un plug-in aggiuntivo) e l’uso della e commerciale (&) per fare riferimento alla classe corrente (molto simile al questo puntatore in JavaScript). Puoi vedere entrambe queste funzionalità di seguito in : passa il mouse e :messa a fuoco pseudo-classi:

export const styles: Object = {
  newsImage: {
    cursor: 'pointer',
    marginTop: '25px',
    display: 'flex',
    width: '10rem',
    height: '10rem',
    marginRight: '0.6rem',
    marginLeft: '0.8rem',
    borderRadius: '1rem',
    backgroundColor: data => data.newsImage.backgroundColor,
    '&:hover': {
      backgroundColor: data => data.newsImage['&:hover'].backgroundColor,
    },
    '&:focus': {
      'border-color': data => data.newsImage['&:focus'].borderColor
    }
  }
};

Oltre a questo, gli stili sono format è fondamentalmente un oggetto definito in JavaScript Object Notation, o come è più comunemente noto, JSON. Quindi, qualunque cosa si applichi a JSON si applicherà anche ai tuoi oggetti di stile. Puoi esprimere le tue chiavi camelCase o tra virgolette, se sei parziale con la notazione CSS standard.

Leggere: Utilizzo di un servizio angolare per leggere le variabili SaSS

Importazioni richieste per i componenti del feed JSS

Nel componente Feed, avremo bisogno di quattro importazioni:

1. La Biblioteca JSS
2. Il jss-plugin-nidificato libreria a cui ho accennato sopra
3. I nostri stili oggetto
4. Alcuni plugin e impostazioni predefiniti, per gentile concessione di jss-preset-default lib

import jss, { StyleSheet } from 'jss';
import jssPluginNested from 'jss-plugin-nested';
import { styles } from "./feed.component.styles";
import preset from 'jss-preset-default';

Generazione di un foglio di stile in JSS

Prima di generare un foglio di stile dal nostro oggetto di stile, dobbiamo prima dire a JSS di usare il file jss-preset-default libreria e configurarlo con le preimpostazioni predefinite.

Viene chiamato il metodo per generare il foglio di stile createStyleSheet(). Accetta l’oggetto stili e alcune opzioni aggiuntive. Non esamineremo tutte le opzioni qui, ma dovremo affrontarle nel prossimo articolo.

Una volta creato un foglio di stile, le sue regole non verranno applicate finché non lo inserirai nell’albero di rendering. Puoi ottenere informazioni molto specifiche su dove viene aggiunto nel DOM, ma per questo hai bisogno di un gestore di fogli di stile. La maggior parte delle volte, puoi semplicemente chiamare il allegare() metodo, che aggiunge il foglio di stile come ultimo elemento nel documento TESTA:

private stylesheet: StyleSheet;

ngOnInit(): void {
  jss.use(jssPluginNested());
  jss.setup(preset());
  
  // Compile styles, apply plugins.
  this.stylesheet = jss.createStyleSheet(styles).attach();
}

Una volta allegato, puoi vedere il foglio di stile generato negli strumenti di sviluppo del browser. Può essere identificato dal data-jss attributo:

Fare riferimento a classi generate in JSS

Parte del fascino di CSS-in-JS è che evita il tipico problema CSS in cui tutto è globale per impostazione predefinita. JSS realizza questo generando nomi di classe univoci, eliminando così completamente la necessità di convenzioni di denominazione. Prendendo il nostro notizieImage oggetto come esempio, JSS genererà una classe come notizieImage-0-0-1. Le classi successive verrebbero incrementate come un’altra Classe-0-0-2ecc… JSS tiene traccia di tutti i nomi di classi generati negli StlyeSheet classi attributo, che possiamo archiviare in una variabile pubblica a cui fare riferimento dai nostri modelli:

public classes: Object;

ngOnInit(): void {
  jss.use(jssPluginNested());
  jss.setup(preset());
  
  //...
  this.classes = this.stylesheet.classes;
}

I nomi delle classi vengono memorizzati utilizzando il nome originale come chiave, quindi nel nostro caso, classi.newsImage farà riferimento ai suoi stili:

Esplorando la demo

Troverai una demo funzionante stackblitz.com. Include l’impostazione di variabili dinamiche in modo da poter avere un’anteprima del tutorial di sviluppo web della prossima settimana. Nel frattempo, è un ottimo modo per familiarizzare con JSS e CSS-in-JS per immaginare se potrebbe essere o meno una degna aggiunta alle tue app web.

Leggi di più tutorial di sviluppo web CSS (Cascading Style Sheets)..