5 minuta uvoda u stilizirane komponente

CSS je čudan. Osnove toga možete naučiti za 15 minuta. Ali mogu proći godine prije nego što smislite dobar način organiziranja svojih stilova.

Dio toga je upravo zbog navala samog jezika. CSS je izvan okvira prilično ograničen, bez varijabli, petlje ili funkcija. U isto vrijeme, prilično je dozvoljeno što možete stilski elemente, klase, ID-ove ili bilo koju kombinaciju istih.

List kaotičnog stila

Kao što ste vjerojatno i sami iskusili, to je često recept za kaos. I dok predprocesori poput SASS i LESS dodaju mnoštvo korisnih značajki, oni ne čine mnogo za zaustavljanje CSS anarhije.

Taj je organizacijski posao prepušten metodologijama poput BEM-a, koje su - iako korisne - potpuno neobavezne i ne mogu se provoditi na razini jezika ili alata.

Novi val CSS-a

Naprijed nekoliko godina, a novi val alata koji se temelje na JavaScript pokušavaju riješiti ove probleme u korijenu, mijenjajući način na koji pišete CSS.

Styled Components jedna je od tih knjižnica, a brzo je privukla veliku pažnju zbog kombinacije inovacija i poznavanja. Dakle, ako koristite React (a ako ne, provjerite moj plan studija JavaScript i moj uvod u React), svakako je vrijedno pogledati ovu novu CSS alternativu.

Nedavno sam ga koristio za redizajn svoje osobne stranice, a danas sam htio podijeliti nekoliko stvari koje sam naučio u procesu.

Dijelovi, oblikovani

Glavna stvar koju trebate razumjeti o Stiliziranim komponentama je da njeno ime treba shvatiti prilično doslovno. Više ne oblikujete HTML elemente ili komponente na temelju njihove klase ili HTML elementa:

Pozdrav svijetu

{h1.title
  veličina fonta: 1,5em;
  boja: ljubičasta;
}

Umjesto toga, definirate stilizirane komponente koje imaju svoje inkapsulirane stilove. Tada ih možete slobodno koristiti u svojoj bazi podataka:

uvoz stiliziranih iz 'styled-components';
const Naslov = stilski.h1`
  veličina fonta: 1,5em;
  boja: ljubičasta;
';
 Pozdrav svijetu 

To se može činiti kao mala razlika, a u stvari su obje sintakse vrlo slične. Ali ključna je razlika što su stilovi sada dio njihove komponente.

Drugim riječima, uklanjamo se CSS klase kao posrednik korak između komponente i njenih stilova.

Kao što je kreator složenih komponenti Max Stoiber rekao:

"Osnovna ideja stilskih komponenti je nametnuti najbolje prakse uklanjanjem mapiranja između stilova i komponenti."

Složenost istovara

U početku će vam se činiti kontra intuitivno, jer je smisao korištenja CSS-a umjesto izravno oblikovanja HTML elemenata (sjećate li se oznake?) U uklanjanju stilova i markiranja uvođenjem ovog sloja posrednika klase.

Ali ta razdvajanja također stvaraju veliku složenost, a tu je i argument da je u usporedbi s CSS-om, "pravi" programski jezik poput JavaScript-a mnogo bolje opremljen da podnese tu kompleksnost.

Rekviziti preko klase

U skladu s ovom filozofijom bez klase, styled-komponente koriste rekvizite nad klasama kada je u pitanju prilagođavanje ponašanja komponente. Pa umjesto:

Hello World

// bit će plave boje
{h1.title
  veličina fonta: 1,5em;
  boja: ljubičasta;
  
  I {.primary
    boja: plava;
  }
}

Napisali biste:

const Naslov = stilski.h1`
  veličina fonta: 1,5em;
  boja: $ {props => props.primary? 'plava': 'ljubičasta'};
';
 Hello World  // bit će plave boje

Kao što vidite, sastavljene komponente omogućuju vam da očistite svoje React komponente tako što nećete sačuvati sve detalje implementacije u vezi sa CSS-om i HTML-om.

U skladu s tim, CSS sa stilskim komponentama i dalje je CSS. Tako da su stvari poput ove također potpuno valjani (iako pomalo ne-idiomatičan) kod:

const Naslov = stilski.h1`
  veličina fonta: 1,5em;
  boja: ljubičasta;
  
  I {.primary
    boja: plava;
  }
';
 Pozdrav Svijet  // bit će plave boje

Ovo je jedna značajka koja čini styled-komponente vrlo jednostavnim za ulazak: kad sumnjate, uvijek se možete vratiti na ono što znate!

upozorenja

Također je važno spomenuti da su styled-komponente još uvijek mlad projekt i da neke značajke još nisu u potpunosti podržane. Na primjer, ako želite dizajnirati dječju komponentu od roditelja, morat ćete se zasad oslanjati na korištenje CSS klasa (barem dok ne izađu styled-komponente v2).

Još nema "službenog" načina da se vaš CSS predbilježi na poslužitelju, mada je to definitivno moguće ručnim ubrizgavanjem stilova.

A činjenica da sastavljene komponente generiraju vlastita randomizirana imena klasa može otežati upotrebu alata za razvoj vašeg preglednika da biste utvrdili gdje su izvorno definirani vaši stilovi.

Ali ono što je vrlo ohrabrujuće je da je temeljni tim sastavljenih komponenata svjestan svih ovih problema i teško radi na ispravljanju jednog po jednog. Verzija 2 stiže uskoro i jako se radujem!

Saznajte više

Moj cilj ovdje nije detaljno objasniti kako stilizirane komponente djeluju, već više kako bih vam dao mali pogled kako biste mogli sami odlučiti želite li provjeriti.

Ako sam uspio učiniti vas znatiželjnom, evo nekih mjesta na kojima možete saznati više o stiliranim komponentama:

  • Max Stoiber nedavno je napisao članak o razlogu stiliziranih komponenti za Smashing Magazine.
  • Sama repo o stiliziranim komponentama ima opsežnu dokumentaciju.
  • Ovaj članak Jamieja Dixona opisuje nekoliko prednosti prelaska na stilizirane komponente.
  • Ako želite saznati više o načinu na koji se knjižnica zapravo implementira, pogledajte članak Max.

Ako želite ići još dalje, možete provjeriti i Glamour, drugačiji pristup novom valnom CSS-u!

Vrijeme samopromocije: tražimo davatelje otvorenog koda koji bi pomogli Novoj, najlakši način za stvaranje cjelovitih aplikacija React & GraphQL zajedno s obrascima, učitavanjem podataka i korisničkim računima. Još ne koristimo stilizirane komponente, ali vi biste mogli biti prvi koji će ih implementirati!