React Styling - Best Practices

CSS er en uredelig, ustyrtelig ting. Som nybegynner i utviklingen har styling alltid, for det meste, vært et forvirrende uforklarlig rot. Det er en klassisk CSS-vits som oppsummerer den pent:

“To CSS-egenskaper går inn i en bar. En barkrakk i en helt annen bar faller over. ”

Og det er sant! Har du noen gang lagt merke til at endring av stilen til en klasse i CSS noen ganger (men ikke andre ganger ...) endrer stilene til flere andre ting? Noen av dem burde ikke være knyttet til den klassen på noen måte? Jeg har. Så som en “fix” ender vi opp med å sette flere klassenavn på ett element (og kaster inn en ID bare for moro skyld), men selv BEM-navnekonvensjoner løste aldri det underliggende problemet: CSS er bare ikke ment for store prosjekter. Videre er CSS (som et eget stilark) ikke ment for React.

Her er et skjermbilde av et tidligere prosjekt. Toppklasser overalt, ID er spredt overalt. Det var et rot.

Den lange og svingete veien til CSS. Klasser og ID-er som blir kastet rundt, forskjellige som tilhører forskjellige komponenter og ikke husker hvilken, for ikke å nevne organisasjon som er en hodepine.

Angi: ylStyled-komponenter

Det er mange og mange måter å bruke styling på i React, men en måte som ser ut til å være den beste praksisen, er å lage komponenter i komponenten din til å style direkte. Disse stilkomponentene påvirker bare den spesifikke komponenten de er gjengitt i, og ingenting annet. Komponenter i React fungerer best når de er små, fokuserte og gjenbrukbare.

CSS-styling for en knapp (gammel måte)Stylet komponent gjengir den samme knappen i ReactDet er enkelt å legge en hovedrekvisita til knappen!

Som du kan se, blir stylingen for knappen-komponenten alt opprettholdt innenfor den spesifikke komponenten den brukes i. Legg merke til at fordi vi bruker taggede malformater, kan vi skrive javascript-logikk rett inn i CSS-en. Enestående!

Stylingstil

CSS-stilbiblioteker som Bootstrap, Materialize, etc. kommer alle ut med sine egne React-spesifikke komponentbiblioteker. Fordi det ikke er noen klassenavn, kan du ikke målrette CSS for å endre den til stilen din. Den eneste måten å endre stilene på er å endre stilen som et objekt (som utgjør en barriere for noen frontend-utviklere som ikke er kjent med javascript). Dette resulterer i hver. nettside. ser. nøyaktig. det samme. Nå, med stylede komponenter, kan du opprette en tilpasset stylet komponent som er rettet mot temakomponenten. Superkul.

Opprette en tilpasset stylet komponent, og styler deretter den stylede komponenten. Så mye stil!

Organisering og lesbarhet

Å bruke stilkomponenter er et flott verktøy for å organisere React-komponentene dine også. I stedet for å forsøke JSX med

s og s, kan du bare gjengi komponentene med sine egne stiler! Siden det ikke er noen innebygde stiler, blir koden veldig enkel å lese og vedlikeholde. Og hvis du vil gjøre en stilendring, kan du gjøre det uten å påvirke noen annen komponent! Fantastisk.

JSX kan bli litt rotete med utallige <div> s, <span> s og inline stilerHei søta.

‘Best Practice’

Du kan fremdeles bruke stilark med stilkomponenter (selv om det tydeligvis vil beseire poenget her ...), og det er også innebygde måter å injisere globale stiler på (for eksempel normalisere eller tilbakestille css-filer). Styling av komponenter i selve komponentene er en god praksis som mange utviklere beveger seg mot i React spesifikt. Jeg oppfordrer alle til å gjøre litt av sin egen undersøkelse om dette, spesielt hvis de ønsker å komme inn på komponentbaserte frontspråk som React og Angular 2.

Her er noen lenker for å lære mer:

David Chan holder foredrag om styling på komponentnivå i React
Han går gjennom hvordan man bygger styling for komponentbaserte systemer generelt.

Glen Maddern holder foredrag om komponentbaserte systemtemaer
Medskaper av bibliotek med stilkomponenter går over styling for komponenter generelt, fokuserer ikke på selve biblioteket.

Offisiell webside for stilede komponenter og lenke til GitHub:
Dokumentasjonen er detaljert og kortfattet.

Max Stoiber holder foredrag på ReactConf 2016
Medskapere av stilkomponenter går i detalj og tar spørsmål om det nye stilbiblioteket.

JavaScript Jabber podcast-episode med Max Stoiber
Stoiber snakker om create-react-app, som han også har laget, samt bibliotek med stylede komponenter.