En 5-minutters introduktion til stylede komponenter

CSS er underligt. Du kan lære det grundlæggende om det på 15 minutter. Men det kan tage år, før du finder ud af en god måde at organisere dine stilarter på.

En del af dette skyldes bare sproget i selve sproget. Ud af kassen er CSS ret begrænset uden variabler, sløjfer eller funktioner. Samtidig er det ganske tilladt, at du kan style elementer, klasser, ID'er eller enhver kombination af disse.

Kaotisk stilark

Som du sandsynligvis har oplevet for dig selv, er dette ofte en opskrift på kaos. Og selvom forbehandlere som SASS og LESS tilføjer en masse nyttige funktioner, gør de ikke rigtig meget for at stoppe CSS-anarki.

Det organisatoriske job blev overladt til metoder som BEM, som - selvom det er nyttigt - er helt valgfrit og ikke kan håndhæves på sprog- eller værktøjsniveau.

Den nye bølge af CSS

Spol et par år fremad, og en ny bølge af JavaScript-baserede værktøjer forsøger at løse disse problemer ved deres rod ved at ændre den måde, du skriver CSS på.

Stylede komponenter er et af disse biblioteker, og det har hurtigt tiltrukket sig en masse opmærksomhed på grund af dens blanding af innovation og fortrolighed. Så hvis du bruger React (og hvis du ikke gør det, så tjek min JavaScript-studieplan og min introduktion til React), er det bestemt værd at tage et kig på dette nye CSS-alternativ.

Jeg har for nylig brugt det til at redesigne mit personlige websted, og i dag ville jeg dele et par ting, jeg lærte i processen.

Komponenter, stylet

Den vigtigste ting, du har brug for at forstå om stylede komponenter er, at dens navn skal tages ret bogstaveligt. Du styler ikke længere HTML-elementer eller -komponenter baseret på deres klasse eller HTML-element:

Hello World

h1.title {
  skriftstørrelse: 1,5 em;
  farve: lilla;
}

I stedet definerer du stylede komponenter, der besidder deres egne indkapslede stilarter. Så bruger du disse frit i hele din codebase:

import stylet fra 'stylede komponenter';
const Titel = stylet.h1`
  skriftstørrelse: 1,5 em;
  farve: lilla;
`;
 Hello World 

Dette kan virke som en mindre forskel, og begge syntakser er faktisk meget ens. Men de vigtigste forskelle er, at stilarter nu er en del af deres komponent.

Med andre ord slipper vi for CSS-klasser som et mellemliggende trin mellem komponenten og dens stilarter.

Som stylede komponenter siger medskaber Max Stoiber:

"Den grundlæggende idé med stylede komponenter er at håndhæve bedste praksis ved at fjerne kortlægningen mellem stilarter og komponenter."

Offloading-kompleksitet

Dette vil virke modsat intuitivt i starten, da hele punktet med at bruge CSS i stedet for direkte at style HTML-elementer (husk -tagget?) Er at afkoble stilarter og markering ved at introducere dette mellemklasse lag.

Men denne afkobling skaber også en masse kompleksitet, og der er et argument, der skal gøres, at sammenlignet med CSS, er et "rigtigt" programmeringssprog som JavaScript meget bedre udstyret til at håndtere den kompleksitet.

Rekvisitter over klasser

I overensstemmelse med denne ikke-klasser-filosofi, bruger stylede komponenter props i forhold til klasser, når det kommer til at tilpasse en komponents opførsel. Så i stedet for:

Hello World

// vil være blå
h1.title {
  skriftstørrelse: 1,5 em;
  farve: lilla;
  
  &.primær{
    farve: blå;
  }
}

Du ville skrive:

const Titel = stylet.h1`
  skriftstørrelse: 1,5 em;
  farve: $ {props => props.primary? 'blå': 'lilla'};
`;
 Hello World  // vil være blå

Som du kan se, giver stylede komponenter dig mulighed for at rydde op i dine React-komponenter ved at holde alle CSS- og HTML-relaterede implementeringsdetaljer ude af dem.

Når det er sagt, er stylede komponenter CSS stadig CSS. Så ting som dette er også fuldstændig gyldig (selvom lidt ikke-idiomatisk) kode:

const Titel = stylet.h1`
  skriftstørrelse: 1,5 em;
  farve: lilla;
  
  &.primær{
    farve: blå;
  }
`;
 Hello World  // vil være blå

Dette er en funktion, der gør stylede komponenter meget nemme at komme ind på: når det tvivler, kan du altid falde tilbage til det, du ved!

forbehold

Det er også vigtigt at nævne, at stylede komponenter stadig er et ungt projekt, og at nogle funktioner endnu ikke understøttes fuldt ud. Hvis du f.eks. Vil style en underordnet komponent fra en forælder, skal du stole på at bruge CSS-klasser i øjeblikket (i det mindste indtil stylede komponenter v2 kommer ud).

Der er heller ingen "officiel" måde at pre-render din CSS på serveren, selvom det helt sikkert er muligt ved at injicere stilarterne manuelt.

Og det faktum, at stylede komponenter genererer sine egne randomiserede klassnavne, kan gøre det svært at bruge din browsers dev-værktøjer til at finde ud af, hvor dine stilarter oprindeligt er defineret.

Men det, der er meget opmuntrende, er, at kerneteamet med stylede komponenter er opmærksomme på alle disse problemer og arbejder hårdt på at løse dem en efter en. Version 2 kommer snart, og jeg glæder mig virkelig til det!

Lær mere

Mit mål her er ikke at forklare i detaljer, hvordan stylede komponenter fungerer, men mere at give dig et lille glimt, så du kan beslutte selv, om det er værd at tjekke ud.

Hvis jeg har formået at gøre dig nysgerrig, her nogle steder, hvor du kan lære mere om stylede komponenter:

  • Max Stoiber skrev for nylig en artikel om grunden til stylede komponenter til Smashing Magazine.
  • Selve stylede komponenter repoen har en omfattende dokumentation.
  • Denne artikel af Jamie Dixon skitserer et par fordele ved at skifte til stylede komponenter.
  • Hvis du vil lære mere om, hvordan biblioteket faktisk implementeres, kan du tjekke denne artikel af Max.

Og hvis du vil gå endnu længere, kan du også tjekke Glamour, en anden oplevelse af nybølget CSS!

Selvpromoveringstid: Vi leder efter open source-bidragydere til at hjælpe med Nova, den nemmeste måde at oprette full-stack React- og GraphQL-apps komplet med formularer, dataindlæsning og brugerkonti. Vi bruger ikke stylede komponenter endnu, men du kan være den første til at implementere dem!