5 minutni uvod v stilske komponente

CSS je čuden. Osnove tega se lahko naučite v 15 minutah. Lahko pa traja leta, preden ugotovite, kako dober način organizirati svoje sloge.

Del tega je le posledica čudovitosti samega jezika. CSS je izven škatle precej omejen, brez spremenljivk, zank ali funkcij. Obenem je zelo dopusten, ker lahko stilirate elemente, razrede, ID-je ali katero koli drugo kombinacijo.

Chaotic Style Sheets

Kot ste verjetno že sami izkusili, je to pogosto recept za kaos. In čeprav predprocesorji, kot sta SASS in LESS, dodajo veliko uporabnih funkcij, pravzaprav ne storijo veliko za zaustavitev anarhije CSS.

To organizacijsko delo je bilo prepuščeno metodologijam, kot je BEM, ki pa so - čeprav uporabne - povsem neobvezna in jih ni mogoče uveljaviti na ravni jezika ali orodij.

Nov val CSS

Nekaj ​​let naprej in nov val orodij, ki temeljijo na JavaScript-ju, poskušajo te težave rešiti v njihovem korenu, tako da spremenijo način, kako pišete CSS.

Styled Components je ena od teh knjižnic in je hitro pritegnila veliko pozornosti zaradi kombinacije inovativnosti in domačnosti. Če torej uporabljate React (in če še niste, si oglejte moj načrt študija JavaScript in moj uvod v React), je vsekakor vredno pogledati to novo alternativo CSS.

Pred kratkim sem ga uporabil za preoblikovanje svojega osebnega spletnega mesta, danes pa sem želel deliti nekaj stvari, ki sem se jih naučil v postopku.

Sestavni deli

Glavna stvar, ki jo morate razumeti pri Styled Components, je, da je treba njeno ime sprejeti dobesedno. Ne uporabljate več elementov ali komponent HTML, ki temeljijo na njihovem razredu ali elementu HTML:

Pozdravljeni svet

h1.title {
  velikost pisave: 1,5em;
  barva: vijolična;
}

Namesto tega določite oblikovane komponente, ki imajo svoje lastne inkapsulirane sloge. Nato jih prosto uporabljate v svoji kodni bazi:

uvoz stiliziranih iz 'styled-components';
const Naslov = slog.h1`
  velikost pisave: 1,5em;
  barva: vijolična;
`;
 Pozdravljeni svet 

To se lahko zdi majhna razlika, in dejansko sta si sintaksi zelo podobni. Ključna razlika je v tem, da so slogi zdaj del njihove komponente.

Z drugimi besedami, odpravljamo razrede CSS kot vmesni korak med komponento in njenimi slogi.

Kot pravi soustvarjalec Max Stoiber, soustvarjalec komponent

"Osnovna ideja stiliziranih komponent je uveljaviti najboljše prakse z odstranjevanjem preslikave med stili in komponentami."

Kompleksnost razkladanja

To se bo sprva zdelo kontra intuitivno, saj je celoten namen uporabe CSS namesto neposrednega stiliranja elementov HTML (se spomnite oznake ?) Ločiti sloge in označevanje z uvedbo tega sloja vmesnega razreda.

Toda ta ločitev prav tako ustvarja veliko zapletenosti in treba je argumentirati, da je v primerjavi s CSS "pravi" programski jezik, kot je JavaScript, veliko bolje opremljen za obvladovanje te zapletenosti.

Rekviziti nad razredi

V skladu s to filozofijo nerazrednih razredov, styled-komponente uporabljajo rekvizite nad razredih, ko gre za prilagajanje obnašanja komponente. Torej namesto:

Hello World

// bo modre barve
h1.title {
  velikost pisave: 1,5em;
  barva: vijolična;
  
  & .primer {
    barva: modra;
  }
}

Napisali bi:

const Naslov = slog.h1`
  velikost pisave: 1,5em;
  barva: $ {props => props.primary? 'modra': 'vijolična'};
`;
 Hello World  // bo modre barve

Kot lahko vidite, sestavljene komponente omogočajo čiščenje komponent React, tako da iz njih ne izbrišete vseh podrobnosti o implementaciji, povezanih s CSS in HTML.

Kljub temu CSS-jev slog še vedno je CSS. Takšne stvari so tudi popolnoma veljavna (čeprav nekoliko ne-idiomatična) koda:

const Naslov = slog.h1`
  velikost pisave: 1,5em;
  barva: vijolična;
  
  & .primer {
    barva: modra;
  }
`;
 Hello World  // bo modre barve

To je ena od lastnosti, zaradi katerih je stilske komponente zelo enostavno vnesti: kadar dvomite, se lahko vedno vrnete na tisto, kar veste!

Caveats

Pomembno je omeniti tudi, da so stilizirane komponente še vedno mlad projekt in da nekatere funkcije še niso v celoti podprte. Na primer, če želite slog nadrejenega sestaviti od nadrejenega, se boste morali za zdaj zanašati na uporabo razredov CSS (vsaj dokler se ne prikažejo styled-komponente v2).

Zaenkrat še ni nobenega uradnega načina za prednastavitev CSS-ja na strežniku, čeprav je zagotovo možno z ročnim vstavljanjem slogov.

In dejstvo, da stilizirane komponente ustvarijo lastna randomizirana imena razredov, lahko težko uporabi orodja za razvijalce brskalnika, da ugotovi, kje so prvotno določeni vaši slogi.

Toda kar je zelo spodbudno, je, da se osrednja ekipa sestavljenih komponent zaveda vseh teh vprašanj in si težko prizadeva, da bi jih odpravili drug za drugim. Verzija 2 prihaja kmalu in tega se zelo veselim!

Nauči se več

Moj cilj tukaj ni podrobno razložiti, kako delujejo sestavne komponente, ampak več, da vam dodam majhen pogled, da se lahko sami odločite, ali je vredno preveriti.

Če mi je uspelo narediti vas radovednega, tukaj nekaj mest, kjer lahko izveste več o sestavnih komponentah:

  • Max Stoiber je pred kratkim napisal članek o razlogu za styled-komponente za Smashing Magazine.
  • Sama sestavljena komponenta repo ima obsežno dokumentacijo.
  • Ta članek Jamieja Dixona opisuje nekaj prednosti prehoda na sestavljene komponente.
  • Če želite izvedeti več o tem, kako se knjižnica dejansko izvaja, si oglejte članek Max.

Če pa želite iti še dlje, lahko preverite tudi Glamour, drugačen prevzem novega vala CSS!

Čas samopromocije: iščemo sodelavce z odprto kodo, ki bi jim pomagali pri Nova, najlažji način za ustvarjanje celovitih aplikacij React & GraphQL skupaj z obrazci, nalaganjem podatkov in uporabniškimi računi. Še ne uporabljamo slogovnih komponent, vendar bi jih lahko prvi uvedli!