5 minuutin esittely tyyliteltyihin komponentteihin

CSS on outo. Voit oppia sen perusteet 15 minuutissa. Mutta voi viedä vuosia, ennen kuin keksit hyvän tavan organisoida tyylisi.

Osa tästä johtuu vain itse kielen virkeistä. CSS on melko rajallinen, ilman muuttujia, silmukoita tai toimintoja. Samanaikaisesti se on melko sallittua, koska voit tyyliä elementtejä, luokkia, tunnuksia tai näiden yhdistelmiä.

Kaoottiset tyylisivut

Kuten olet todennäköisesti kokenut itsellesi, tämä on usein kaaoksen resepti. Ja vaikka esikäsittelijät, kuten SASS ja LESS, lisäävät paljon hyödyllisiä ominaisuuksia, ne eivät todellakaan tee paljon CSS-anarkian estämiseksi.

Tämä organisaatiotyö jätettiin BEM: n kaltaisille menetelmille, jotka ovat hyödyllisiä mutta täysin valinnaisia, eikä niitä voida panna täytäntöön kieli- tai työkalutasolla.

CSS: n uusi aalto

Eteenpäin pari vuotta, ja uusi Java-pohjaisten työkalujen aalto yrittää ratkaista nämä ongelmat juurillaan muuttamalla tapaa, jolla kirjoitat CSS: n.

Styled Components on yksi näistä kirjastoista, ja se on herättänyt nopeasti paljon huomiota innovaatioiden ja perehtyneisyyden yhdistelmän ansiosta. Joten jos käytät Reaktia (ja jos et, tarkista JavaScriptin tutkimussuunnitelmani ja esitteeni Reaktista), on ehdottomasti syytä tarkastella tätä uutta CSS-vaihtoehtoa.

Käytin sitä äskettäin henkilökohtaisen sivustoni uudelleensuunnitteluun, ja tänään halusin kertoa muutamista asioista, jotka olen oppinut prosessissa.

Komponentit, tyyliltään

Tärkein asia, joka sinun on ymmärrettävä tyyliteltyjen komponenttien suhteen, on, että sen nimi on otettava varsin kirjaimellisesti. Et enää muotoile HTML-elementtejä tai komponentteja niiden luokan tai HTML-elementin perusteella:

Hei maailma

h1.title {
  fonttikoko: 1,5em;
  väri: violetti;
}

Sen sijaan määrität tyylilliset komponentit, joilla on omat koteloidut tyylinsä. Käytät sitten näitä vapaasti koko tietokannassasi:

tuoda tyylillä 'tyylistä komponenteista';
const Otsikko = tyylinen.h1
  fonttikoko: 1,5em;
  väri: violetti;
`;
 Hei maailma 

Tämä saattaa tuntua pieneltä erolta, ja itse asiassa molemmat syntaksit ovat hyvin samankaltaisia. Mutta niiden tärkein ero on, että tyylit ovat nyt osa niiden komponenttia.

Toisin sanoen pääsemme eroon CSS-luokista väliaskeleena komponentin ja sen tyylien välillä.

Tyyliteltyjen komponenttien sisällöntuottaja Max Stoiber sanoo:

"Tyyliteltyjen komponenttien perusajatus on parhaiden käytäntöjen noudattaminen poistamalla tyylien ja komponenttien välinen vastaavuus."

Monimutkaisuuden purkaminen

Tämä vaikuttaa aluksi vasta intuitiiviselta, koska CSS: n käytön sijaan HTML-elementtien muotoilun sijasta (muistatko -tagin?) On typpien ja merkintöjen erottaminen toisistaan ​​ottamalla käyttöön tämä välitason luokkakerros.

Mutta tämä erottaminen tuottaa myös paljon monimutkaisuutta, ja on perusteltava, että CSS: ään verrattuna "todellinen" ohjelmointikieli, kuten JavaScript, on paljon paremmin varustettu käsittelemään tätä monimutkaisuutta.

Rekvisiitta luokkien yli

Tämän luokkien ulkopuolisen filosofian mukaisesti tyylitellyt komponentit käyttävät rekvisiitta luokkien yli komponentin käyttäytymisen mukauttamiseksi. Joten sen sijaan:

Hei maailma

// on sininen
h1.title {
  fonttikoko: 1,5em;
  väri: violetti;
  
  & .Primary {
    väri: sininen;
  }
}

Voit kirjoittaa:

const Otsikko = tyylinen.h1
  fonttikoko: 1,5em;
  väri: $ {rekvisiitta => rekvisiitta. 'sininen': 'violetti'};
`;
 Hei maailma  // on sininen

Kuten näette, tyyliteltyjen komponenttien avulla voit puhdistaa React-komponentit pitämällä kaikki CSS: ään ja HTML: ään liittyvät toteutustiedot niistä poissa.

Tyyliteltyjen komponenttien CSS on silti CSS. Joten tällaiset asiat ovat myös täysin päteviä (vaikkakin hiukan ei-idiomaattisia) koodeja:

const Otsikko = tyylinen.h1
  fonttikoko: 1,5em;
  väri: violetti;
  
  & .Primary {
    väri: sininen;
  }
`;
 Hei maailma  // on sininen

Tämä on yksi ominaisuus, joka tekee tyylitellyistä komponenteista erittäin helpon pääsyn: kun epäilet, voit aina palata takaisin siihen, mitä osaat!

varoitukset

On myös tärkeää mainita, että tyylit-komponentit ovat edelleen nuori projekti ja että joitain ominaisuuksia ei vielä tueta kokonaan. Jos esimerkiksi haluat tyyliä lastekomponentin vanhemmalta, joudut luottamaan CSS-luokkien käyttämiseen nyt (ainakin siihen asti, kunnes tyylikomponentit v2 ilmestyy).

Ei myöskään ole "virallista" tapaa tehdä CSS ennakkoon palvelimella, vaikka se on ehdottomasti mahdollista injektoimalla tyylit manuaalisesti.

Ja se, että tyylit-komponentit tuottavat omat satunnaistetut luokanimet, voivat vaikeuttaa selaimesi dev-työkalujen käyttämistä selvittääksesi missä tyylit alun perin määritetään.

Mutta erittäin rohkaisevaa on, että tyyliteltyjen komponenttien ydinjoukkue on tietoinen kaikista näistä asioista ja työskentelee ahkerasti niiden korjaamiseksi yksi kerrallaan. Versio 2 on tulossa pian, ja odotan sitä todella innolla!

Lisätietoja

Tavoitteenani ei ole tässä selittää yksityiskohtaisesti, kuinka tyylit-komponentit toimivat, vaan antaa sinulle pienen välähdyksen, jotta voit päättää itse, kannattaako se tarkistaa.

Jos olen onnistunut saamaan sinut uteliaksi, tässä joitain paikkoja, joissa voit oppia lisää tyylistä komponenteista:

  • Max Stoiber kirjoitti äskettäin artikkelin Smashing Magazine -lehden tyyliteltyjen komponenttien syystä.
  • Itse tyyliteltyjen komponenttien repolla on laaja dokumentaatio.
  • Tässä Jamie Dixonin artikkelissa hahmotellaan muutamia etuja vaihtamisesta tyyliteltyihin komponentteihin.
  • Jos haluat lisätietoja kirjaston tosiasiallisesta toteutuksesta, katso tämä Maxin artikkeli.

Ja jos haluat mennä vielä pidemmälle, voit myös tarkistaa Glamourin, erilaisen uuden aallon CSS: n!

Itsereklaamisaika: Etsimme avoimen lähdekoodin avustajia auttamaan Novaa. Helpoin tapa luoda täyspinoisia React & GraphQL-sovelluksia täydellisinä lomakkeilla, tietojen lataamisella ja käyttäjätileillä. Emme käytä vielä tyyliteltyjä komponentteja, mutta voit olla ensimmäinen niistä!