CSS-in-JS biblioteke, poput styled-components, postale su popularnije posljednjih godina. Oni enkapsuliraju CSS do razine komponenti i omogućuju vam korištenje JavaScripta za definiranje višekratnih stilova.
Koristeći stilizirane komponente, možete održavati arhitekturu vođenu komponentama koju React već pojačava. Ali knjižnica ima i neke nedostatke.
Kako funkcioniraju stilizirane komponente
The stilizirane-komponente Biblioteka CSS-in-JS omogućuje pisanje CSS-a unutar datoteka komponenti. Sintaksa mu je ista kao CSS, tako da ga je prilično lako razumjeti. To je savršena sredina za JavaScript programere koji se drže podalje od čistog CSS-a.
Da biste vidjeli kako radi, razmotrite sljedeću komponentu Title koja prikazuje h1 element.
konst Naslov = stilizirano.h1`
veličina fonta: 1.5em;
poravnanje teksta: središte;
boja: crvena;
`;
Ovu komponentu možete koristiti kao bilo koju drugu React komponentu.
konst Početna = () => {
povratak (
<Titula>Naslov stilizirane komponente</Title>
)
}
Također je vrlo moćan jer olakšava rad s rekvizitima i stanjem.
Na primjer, boja i pozadina ove komponente ovise o rekvizitima.
uvoz stilizirani iz "stilizirane-komponente";konst Button = styled.button`
podstava: 0.8rem 1.6rem;
boja pozadine: ${(rekviziti) => (rekviziti.primarni? "ljubičasta": "bijela")};
granica: 1px čvrsta #00000;
boja: ${(rekviziti) => (rekviziti.primarni? "bijela": "ljubičasta")};
`;
izvozzadanofunkcijaDom() {
povratak <Gumb primarni>Primarni</Button>
}
Uz stilizirane komponente, ne trebate ručno prosljeđivati rekvizite CSS-u. Automatski je dostupan, pojednostavljujući stilove pisanja koji ovise o podacima iz komponente.
Prednosti korištenja stiliziranih komponenti
Evo nekih prednosti korištenja biblioteke stiliziranih komponenti.
Rješava probleme specifičnosti CSS-a
Stilizirane komponente eliminiraju probleme specifičnosti jer enkapsulira CSS unutar komponente. To znači da se ne morate brinuti da će se nazivi klasa sukobiti ili da će se vaše korisničko sučelje pretvoriti u nered zbog sukoba naziva klasa.
Omogućuje pisanje CSS-a unutar komponenti
Kao što se vidi iz primjera komponente gumba, styled-components vam omogućuje kombiniranje CSS-a i JS-a u istoj datoteci. Dakle, ne morate stvarati zasebnu CSS datoteku ili stalno prelaziti s datoteke na datoteku.
Ovo je ogromna prednost pri izradi kompleta korisničkog sučelja jer pohranjujete sve funkcije komponenti u jednu datoteku.
Osim toga, pisanje CSS-a unutar komponenti. Olakšava dijeljenje rekvizita i stanja sa stilovima.
Omogućuje provjeru tipa
Pomoću stiliziranih komponenti možete upisivati propise i vrijednosti korištene u svojim stilovima. Na primjer, možete prepisati gornju komponentu gumba koristeći TypeScript.
sučeljerekviziti{
primarni: Booleov
}
const Button = styled.button<rekviziti>`
podstava: 0.8rem 1.6rem;
boja pozadine: ${(rekviziti) => (rekviziti.primarni? "ljubičasta": "bijela")};
granica: 1px čvrsta #00000;
boja: ${(rekviziti) => (rekviziti.primarni? "bijela": "ljubičasta")};
`;
Korištenje TypeScripta u komponenti znači provjeravanje tipskih pogrešaka dok kodirate i smanjenje vremena otklanjanja pogrešaka.
Podržava Tematiziranje izvan okvira
Dodavanje tamne teme ili bilo koja druga tema za vašu aplikaciju može biti teška i dugotrajna. Međutim, Styled komponente pojednostavljuju proces. Svojoj aplikaciji možete dodati teme izvozom a
konst Gumb = styled.main`
boja pozadine: ${props => props.theme.light.background};
boja: ${rekviziti => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Dugme>
Gumb za svjetlo
</Button>
</ThemeProvider>
Komponenta ThemeProvider prosljeđuje teme svim stiliziranim komponentama koje obavija. Te komponente tada mogu koristiti vrijednosti teme u svojim stilovima. U ovom primjeru, gumb koristi vrijednosti teme za pozadinu i boje fonta.
Nedostaci korištenja stiliziranih komponenti
Dok korištenje biblioteke stiliziranih komponenti ima mnoge prednosti, ima i nedostatke.
Nije neovisno o okviru
Pisanje CSS-a u JS-u znači da će razdvajanje to dvoje u budućnosti biti teško, što je užasno za mogućnost održavanja. Na primjer, ako ikada odlučite promijeniti svoj JavaScript okvir, morat ćete ponovno napisati većinu svoje baze kodova.
Ovo je dugotrajno i skupo. Korištenje CSS moduli ili okvirno neovisna knjižnica poput emocija je spremnija za budućnost.
Može biti teško čitati
Razlikovanje između styled i React komponenti može biti teško, osobito izvan sustava atomskog dizajna. Razmotrite ovaj primjer:
<Glavni>
<Nav>
<ListItem>
<LinkText>Usvojite kućnog ljubimca</LinkText>
</ListItem>
<ListItem>
<LinkText>Donirajte</LinkText>
</ListItem>
</Nav>
<Zaglavlje>Posvoji, don't trgovina!</Header>
<SekundarniBtn btnTekst="Donirajte" />
</Main>
Jedini način da saznate koja komponenta sadrži poslovnu logiku je provjera ima li rekvizite. Nadalje, iako su nazivi komponenti u ovom primjeru opisni, još uvijek ih je teško vizualizirati.
Na primjer, komponenta zaglavlja može biti naslov, ali osim ako ne provjerite stilove, možda nikada nećete znati je li to h1, h2 ili h3.
Neki programeri rješavaju ovaj problem samo koristeći stiliziranu komponentu kao omotač i koristeći semantičke HTML oznake za elemente unutar nje.
U ovom primjeru, komponenta zaglavlja mogla bi koristiti oznaku h1.
<h1>Posvoji, don't trgovina!</h1>
Ovo možete učiniti dalje definiranjem stiliziranih komponenti u drugoj datoteci (npr. styled.js), koju kasnije možete uvesti u React komponentu.
uvoz * kao Stilizirano iz './styled'
// koristi styled.components
<stilizirani. Glavni>
// kod
</styled.Main>
Na taj način dobivate jasan uvid u to koje su komponente stilizovane, a koje React komponente.
Stilizirane komponente kompajliraju se tijekom izvođenja
Za aplikacije koje koriste stilizirane komponente, preglednik preuzima CSS i analizira ga pomoću JavaScripta prije nego što ih ubaci u stranicu. To uzrokuje probleme s izvedbom jer korisnik mora preuzeti puno JavaScripta pri početnom učitavanju.
Statički CSS je mnogo brži. Ne treba ga obraditi prije nego što ga preglednik upotrijebi za stiliziranje stranica. Međutim, biblioteka stiliziranih komponenti poboljšava se sa svakim izdanjem. Ako si možete priuštiti neke smanjene performanse, samo naprijed i koristite to.
Kada koristiti stilizirane komponente
Neki programeri uživaju pisati CSS u JS datotekama, dok drugi više vole imati zasebne CSS datoteke. Kako ćete se odlučiti za pisanje CSS-a u konačnici bi trebalo ovisiti o samom projektu i onome što volite vi ili vaš tim. Stilizirane komponente dobar su izbor za izgradnju biblioteke korisničkog sučelja jer sve može biti u jednoj datoteci i lako se može izvesti i ponovno upotrijebiti.
Ako više volite pisati čisti CSS, koristite CSS module. Možete imati zasebne CSS datoteke, a on prema zadanim postavkama lokalno pokriva stilove. Bez obzira na to što odaberete, neophodno je imati dobro poznavanje CSS-a.
