5-minutiline sissejuhatus stiilikomponentidesse

CSS on imelik. Selle põhialused saate õppida 15 minutiga. Kuid võib kuluda aastaid, enne kui leiate hea viisi oma stiilide korraldamiseks.

Osalt on see tingitud just keele enda keeristest. Väljastpoolt on CSS üsna piiratud, ilma muutujate, silmuste ja funktsioonideta. Samal ajal on see üsna lubatav, kuna saate stiileerida elemente, klasse, ID-sid või nende kombinatsioone.

Kaootilised stiililehed

Nagu olete enda jaoks ilmselt kogenud, on see sageli kaose retsept. Ja kuigi eeltöötlejad nagu SASS ja LESS lisavad palju kasulikke funktsioone, ei tee nad CSS-i anarhia peatamiseks tegelikult palju.

See organisatsiooniline töö jäeti sellistele metoodikatele nagu BEM, mis on küll kasulik, kuid täiesti vabatahtlik ning seda ei saa keele- ega tööriistatasandil jõustada.

CSS-i uus laine

Paar aastat edasi liikuda ja uus JavaScripti põhiste tööriistade laine üritab neid probleeme lahendada nende juurtes, muutes CSS-i kirjutamisviisi.

Stiilitud komponendid on üks neist raamatukogudest ja see on tänu oma uuenduslikkuse ja tuntuse segule kiiresti pälvinud palju tähelepanu. Nii et kui kasutate Reaktorit (ja kui te seda ei tee, siis vaadake minu JavaScripti uuringukava ja minu sissejuhatust Reaktisse), siis tasub kindlasti vaadata seda uut CSS-i alternatiivi.

Kasutasin seda hiljuti oma isikliku saidi ümberkujundamiseks ja täna tahtsin jagada mõnda asja, mida ma selle käigus õppisin.

Komponendid, stiilis

Peamine, mida peate stiilitud komponentide kohta mõistma, on see, et selle nime tuleks võtta üsna sõna-sõnalt. Te ei kujunda enam HTML-i elemente või komponente nende klassi või HTML-i elementide põhjal:

Tere maailm

h1.title {
  kirjasuurus: 1,5em;
  värv: lilla;
}

Selle asemel määratlete stiilsed komponendid, millel on oma kapseldatud stiilid. Siis kasutate neid kogu oma andmebaasis vabalt:

importida stiilselt 'stiilis-komponentidest';
const Pealkiri = stiilis.h1 "
  kirjasuurus: 1,5em;
  värv: lilla;
`;
 Tere maailm 

See võib tunduda väikese erinevusena ja tegelikult on mõlemad süntaksid väga sarnased. Kuid peamine erinevus on see, et stiilid on nüüd nende komponendi osa.

Teisisõnu, vabaneme CSS-i klassidest kui vahepealsest sammust komponendi ja selle stiilide vahel.

Nagu stiilikomponentide looja Max Stoiber ütleb:

"Stiilikomponentide põhiidee on parimate tavade juurutamine, eemaldades stiilide ja komponentide vahelised kaardistused."

Keerukuse mahalaadimine

See tundub alguses vastuoluline, kuna HTML-i elementide otsese kujundamise asemel (kas mäletate silti ?) On CSS-i kasutamise mõte lahutada stiilid ja märgistused selle vahepealse klassikihi juurutamise teel.

Kuid see lahtisidumine tekitab ka palju keerukust ja tuleb esitada argument, et CSS-iga võrreldes on „päris” programmeerimiskeel, nagu JavaScript, selle keerukusega toimetulemiseks palju paremini varustatud.

Rekvisiidid üle klasside

Kooskõlas selle klassideta filosoofiaga kasutavad stiilis komponendid komponendi käitumise kohandamiseks rekvisiite klasside kohal. Seega:

Tere maailm

// on sinine
h1.title {
  kirjasuurus: 1,5em;
  värv: lilla;
  
  & .primaarne {
    värv: sinine;
  }
}

Te kirjutaksite:

const Pealkiri = stiilis.h1 "
  kirjasuurus: 1,5em;
  värv: $ {rekvisiidid => rekvisiidid? 'sinine': 'lilla'};
`;
 Tere maailm  // on sinine

Nagu näete, võimaldavad stiilsed komponendid teil oma Reacti komponente puhastada, hoides neist välja kõik CSS-i ja HTML-iga seotud rakenduse üksikasjad.

See tähendab, et stiilsete komponentide CSS on endiselt CSS. Nii et ka sellised asjad on täiesti kehtivad (ehkki pisut mitte idioomaatsed) kood:

const Pealkiri = stiilis.h1 "
  kirjasuurus: 1,5em;
  värv: lilla;
  
  & .primaarne {
    värv: sinine;
  }
`;
 Tere maailm  // on sinine

See on üks omadus, mis muudab stiilikomponentidesse sattumise väga lihtsaks: kui kahtlete, võite alati tagasi minna selle juurde, mida teate!

Hoiatused

Samuti on oluline mainida, et stiilikomponendid on alles noor projekt ja mõnda funktsiooni ei toetata veel täielikult. Näiteks kui soovite stiilida lastekomponendi vanema käest, peate nüüd lootma CSS-i klasside kasutamisele (vähemalt seni, kuni välja tulevad stiilis komponendid v2).

Samuti ei ole veel ühtegi „ametlikku“ viisi oma CSS-i serverisse eel renderdamiseks, ehkki stiilide käsitsi sisestamine on kindlasti võimalik.

Ja see, et stiilis komponendid genereerib oma juhuslikud klassinimed, võib muuta teie brauseri tööriistade kasutamise raskeks, et aru saada, kus teie stiilid algselt on määratletud.

Kuid väga julgustav on see, et stiilis komponentide põhimeeskond on kõigist neist probleemidest teadlik ja nende ükshaaval lahendamisega on raske vaeva näha. Versioon 2 on varsti saadaval ja ma tõesti ootan seda!

Lisateave

Minu eesmärk pole siin üksikasjalikult selgitada, kuidas stiilikomponendid toimivad, vaid rohkem selleks, et anda teile väike pilguheit, et saaksite ise otsustada, kas see on väärt tutvumist.

Kui mul on õnnestunud teid uudishimulikuks muuta, siis siin on mõned kohad, kus saate lisateavet stiilikomponentide kohta:

  • Max Stoiber kirjutas hiljuti artikli Smashing Magazine'i jaoks stiilikomponentide põhjusest.
  • Stiilikomponentide repol endal on ulatuslik dokumentatsioon.
  • See Jamie Dixoni artikkel kirjeldab stiilikomponentidele ülemineku eeliseid.
  • Kui soovite lisateavet selle kohta, kuidas teeki tegelikult rakendatakse, vaadake seda Maxi artiklit.

Ja kui soovite veelgi kaugemale jõuda, võite vaadata ka Glamouri, erinevat uue laine CSS-i!

Enesereklaamide aeg: otsime Nova abistamiseks avatud lähtekoodiga kaasalööjaid - see on lihtsaim viis täisvormide React & GraphQL rakenduste loomiseks koos vormide, andmete laadimise ja kasutajakontodega. Me ei kasuta veel stiilis komponente, kuid võite olla esimene, kes neid juurutab!