Un'introduzione di 5 minuti ai componenti stilizzati

CSS è strano. Puoi impararne le basi in 15 minuti. Ma possono volerci anni prima di capire un buon modo per organizzare i tuoi stili.

Parte di ciò è dovuta solo alle stranezze della lingua stessa. Immediatamente, CSS è piuttosto limitato, senza variabili, loop o funzioni. Allo stesso tempo, è abbastanza permissivo in quanto puoi stile elementi, classi, ID o qualsiasi combinazione di questi.

Fogli di stile caotico

Come probabilmente hai sperimentato per te stesso, questa è spesso una ricetta per il caos. E mentre i preprocessori come SASS e LESS aggiungono molte funzioni utili, in realtà non fanno molto per fermare l'anarchia CSS.

Quel lavoro organizzativo è stato lasciato a metodologie come il BEM, che - sebbene utile - è del tutto facoltativo e non può essere applicato a livello di lingua o di strumenti.

La nuova ondata di CSS

Avanti veloce di un paio d'anni e una nuova ondata di strumenti basati su JavaScript sta cercando di risolvere questi problemi alla radice, cambiando il modo in cui scrivi i CSS.

Styled Components è una di queste librerie e ha rapidamente attirato molta attenzione grazie al suo mix di innovazione e familiarità. Quindi, se usi React (e se non lo fai, dai un'occhiata al mio piano di studio JavaScript e alla mia introduzione a React), vale sicuramente la pena dare un'occhiata a questa nuova alternativa CSS.

Di recente l'ho usato per ridisegnare il mio sito personale e oggi volevo condividere alcune cose che ho imparato nel processo.

Componenti, in stile

La cosa principale che devi capire su Styled Components è che il suo nome dovrebbe essere preso alla lettera. Non stai più disegnando elementi o componenti HTML in base alla loro classe o elemento HTML:

Hello World

h1.title {
  dimensione carattere: 1,5em;
  colore viola;
}

Invece, stai definendo componenti in stile che possiedono i loro stili incapsulati. Quindi li stai usando liberamente in tutta la tua base di codice:

importazione in stile da "componenti in stile";
titolo const = styled.h1`
  dimensione carattere: 1,5em;
  colore viola;
`;
 Hello World 

Potrebbe sembrare una differenza minore, e in effetti entrambe le sintassi sono molto simili. Ma la differenza fondamentale è che gli stili fanno ora parte del loro componente.

In altre parole, ci stiamo liberando delle classi CSS come passaggio intermedio tra il componente e i suoi stili.

Come afferma il co-creatore di componenti in stile Max Stoiber:

"L'idea di base dei componenti con stile è applicare le migliori pratiche rimuovendo la mappatura tra stili e componenti."

Complessità di scarico

All'inizio questo sembrerà controintuitivo, poiché l'intero punto di usare CSS invece di dare uno stile diretto agli elementi HTML (ricordate il tag ?) È di disaccoppiare gli stili e il markup introducendo questo livello di classe intermedio.

Ma questo disaccoppiamento crea anche molta complessità, e c'è un argomento da argomentare che rispetto al CSS, un linguaggio di programmazione "reale" come JavaScript è molto meglio attrezzato per gestire quella complessità.

Puntelli sopra le classi

In linea con questa filosofia senza classi, i componenti con stile fanno uso di oggetti di scena rispetto alle classi quando si tratta di personalizzare il comportamento di un componente. Quindi invece di:

Hello World

// sarà blu
h1.title {
  dimensione carattere: 1,5em;
  colore viola;
  
  &.primario{
    colore blu;
  }
}

Dovresti scrivere:

titolo const = styled.h1`
  dimensione carattere: 1,5em;
  colore: $ {props => props.primary? 'blue': 'purple'};
`;
 Hello World  // sarà blu

Come puoi vedere, i componenti con stile ti consentono di ripulire i componenti di React mantenendo tutti i dettagli di implementazione relativi a CSS e HTML.

Detto questo, i CSS con componenti in stile sono ancora CSS. Quindi cose come questa sono anche del codice totalmente valido (anche se leggermente non idiomatico):

titolo const = styled.h1`
  dimensione carattere: 1,5em;
  colore viola;
  
  &.primario{
    colore blu;
  }
`;
 Hello World  // sarà blu

Questa è una caratteristica che rende molto facile accedere ai componenti di stile: in caso di dubbio, puoi sempre ricorrere a ciò che sai!

Avvertenze

È anche importante ricordare che i componenti in stile sono ancora un progetto giovane e che alcune funzionalità non sono ancora completamente supportate. Ad esempio, se vuoi modellare un componente figlio da un genitore, per il momento dovrai fare affidamento sull'uso delle classi CSS (almeno fino a quando non verrà rilasciato lo stile dei componenti v2).

Inoltre, non esiste ancora un modo "ufficiale" per eseguire il pre-rendering dei CSS sul server, anche se è sicuramente possibile iniettando manualmente gli stili.

E il fatto che i componenti con stile generino i propri nomi di classe casuali può rendere difficile l'utilizzo degli strumenti di sviluppo del browser per capire dove sono stati originariamente definiti i tuoi stili.

Ma ciò che è molto incoraggiante è che il core team dei componenti con stile è a conoscenza di tutti questi problemi ed è al lavoro per risolverli uno per uno. La versione 2 arriverà presto e non vedo l'ora!

Per saperne di più

Il mio obiettivo qui non è quello di spiegare in dettaglio come funzionano i componenti con stile, ma piuttosto di darti una piccola occhiata in modo da poter decidere da solo se vale la pena dare un'occhiata.

Se sono riuscito a farti incuriosire, qui alcuni posti dove puoi saperne di più sui componenti in stile:

  • Max Stoiber ha recentemente scritto un articolo sul motivo dei componenti in stile per Smashing Magazine.
  • Il repository dei componenti con stile ha una documentazione estesa.
  • Questo articolo di Jamie Dixon evidenzia alcuni vantaggi del passaggio a componenti con stile.
  • Se vuoi saperne di più su come la libreria è effettivamente implementata, consulta questo articolo di Max.

E se vuoi andare ancora oltre, puoi anche dare un'occhiata a Glamour, una versione diversa del CSS new wave!

Tempo di autopromozione: stiamo cercando collaboratori open source per aiutare Nova, il modo più semplice per creare app React & GraphQL full-stack complete di moduli, caricamento dei dati e account utente. Non usiamo ancora componenti stilizzati, ma potresti essere il primo ad implementarli!