Fiecare cronometru scrie CSS în fiecare zi. Și CSS, așa cum se știe, are multe probleme pe care aș vrea să le rezolv.
Problema # 1: Toate stilurile din CSS sunt globale. Dacă ați declarat o clasă .container cu câteva proprietăți și Peter a făcut același lucru în proiectul dvs. mâine, ce stiluri se aplică? A ta sau Petit? În mod natural, stilurile globale sunt rele și oamenii vin cu cârje sub formă de BEMa, de exemplu. Cine nu a lucrat cu BEM este atunci când creați o clasă precum .authentication și puneți toate stilurile de clase copil în interiorul cu autentificare prefix. Se dovedește a fi o componentă unică pe care o puteți reumple. Aceasta este o mare cârjă, care este prezentată și sub forma unei metodologii care trebuie studiată. Toate stilurile cu BEM rămân globale și pot fi suprasolicitate. Vrem să scriem clase și să nu credem că se pot întâmpla din nou, pentru că trebuie să fie unici.
Problema numărul 2: Avem un element în care sunt prescrise anumite stiluri. Și vrem să acoperim aceste stiluri în altă parte. De obicei, oamenii pun un element în care doresc să redefinească stilurile într-un alt element și, din moment ce greutatea selectorului devine mai mare, stilurile sunt redefinite. Într-un proiect mare, acest lucru este puțin asemănător unui cod concis. Vrem să redefinăm stilurile nu ar putea fi în CSS, dar înainte de pierderea css-ului. Adică, în pagina din CSS am văzut un cod curat și concis, fără suprascriere.
Problema # 3: Vrem să scăpăm de importanță o dată pentru totdeauna.
Folosesc biblioteca afrodită, care a fost creată în Academia Khan și care funcționează bine atât fără reactant cât și cu reacția.
Deci, am un proiect pe care l-am generat cu aplicația create-react-app.
Să instalăm aprodite.
Acum importăm funcția CSS de la aprodite.
Toate stilurile noastre ale componentei App vor fi păstrate în fișierul AppStyles. Să importăm StyleSheet și să adăugăm clasa containerului.
Toate stilurile care sunt scrise printr-o linie vor fi scrise de camelCase, iar toate valorile sunt șiruri de caractere. Cum utilizez acum această clasă de containere în componenta App?
Tocmai trecem funcția css la className cu parametrul clasei pe care dorim să-l aplicăm.
Să ne uităm la browser-ul pe care l-am lăsat. După cum putem vedea, ne aplica stilul. containerul nostru acum este unic, deoarece a fost adaugat sufixul generat. Acum, chiar dacă în altă parte cineva folosește clasa container, acesta va fi de asemenea unic. Dar de ce stilul nostru este scris de important? Deoarece pentru o tranziție mai ușoară Afroditei cu un proiect care este scris în css obișnuită toate proprietățile sunt adăugate automat la importante. Nu este nimic în neregulă cu asta, pentru că el a făcut doar pentru a trece peste stiluri css, dar să eliminați toate la fel, pentru că avem un nou proiect si nu avem nevoie de ea
Pentru aceasta, noi pur și simplu importem din afrodit în loc de afrodit / nu-important
După cum vedem, important a dispărut. Toate stilurile pe care le scriem sunt adăugate la cap, dar fără spații, astfel încât pagina să se încarce mai repede.
Ce altceva ne oferă afroditul? De exemplu, autoprefixer. Să încercăm. Să adăugăm la afișajul nostru de clasă pentru containere: flex
În browser, vedem că stilurile au fost generate imediat cu prefixe pentru toate browserele.
Cum rămâne cu reutilizarea claselor fără problemele pe care le avem în CSS? Să creăm un pătrat negru, pe care îl vom redimensiona în locuri diferite, cu dimensiuni diferite.
Să creăm un fișier squareStyles, care va fi clasa noastră partajată.
Acesta este un obiect normal cu stiluri. Nimic mai mult. Chiar și afrodita nu am aplicat. Acum, să o afișăm în App.
Tocmai am adăugat o altă clasă din stilurile App.
Acum, să importăm blackSquare în stilurile de aplicație și să amestecăm toate stilurile din blackSquare folosind o distribuție din ES7.
Dacă ne uităm la browser, atunci avem un pătrat negru. Acum, imaginați-vă că în toate locurile avem nevoie de 100x100, și anume în App 50x50.
Hai să înfășurăm stilurile în pătrat.
În browser, vedem că lățimea și înălțimea pătratului s-au schimbat. Să ne uităm la stiluri. Deoarece toate stilurile sunt generate de noi, în browser vom vedea numai stilurile rezultate. Adică, lățimea și înălțimea sunt setate o singură dată. Nu există stiluri suprapuse de 20 de ori cu greutăți diferite ale selectorilor. Doar un stil unic.
Articole similare
Trimiteți-le prietenilor: