O introducere de 5 minute a componentelor stilate

CSS este ciudat. Puteți afla elementele de bază ale acestuia în 15 minute. Dar poate dura ani până îți dai seama de o modalitate bună de a-ți organiza stilurile.

O parte din aceasta se datorează tocmai intereselor limbajului însuși. În afara casetei, CSS este destul de limitat, fără variabile, bucle sau funcții. În același timp, este destul de permisiv prin faptul că puteți stila elemente, clase, ID-uri sau orice combinație dintre acestea.

Foi de stil haotic

După cum probabil ai experimentat pentru tine, aceasta este adesea o rețetă pentru haos. Și, în timp ce preprocesorii precum SASS și MENȚI adaugă o mulțime de caracteristici utile, nu prea fac multe pentru a opri anarhia CSS.

Acea activitate organizațională a fost lăsată metodologiilor precum BEM, care - deși este utilă - este în întregime opțională și nu poate fi aplicată la nivel de limbă sau de instrumentare.

Noul val al CSS

Transmite rapid câțiva ani și un nou val de instrumente bazate pe JavaScript încearcă să rezolve aceste probleme la rădăcina lor, schimbând modul în care scrii CSS.

Componente stilate este una dintre aceste biblioteci și a atras rapid multă atenție datorită mixului său de inovație și familiaritate. Așadar, dacă utilizați React (și dacă nu, consultați planul meu de studiu JavaScript și informațiile mele despre React), merită cu siguranță să aruncați o privire la această nouă alternativă CSS.

L-am folosit recent pentru a-mi reproiecta site-ul personal, iar astăzi am vrut să împărtășesc câteva lucruri pe care le-am învățat în acest proces.

Componente, Styled

Principalul lucru pe care trebuie să îl înțelegeți despre Componente Stilate este că numele său trebuie luat destul de literal. Nu mai stilizați elemente sau componente HTML pe baza clasei sau elementului HTML:

Hello World

h1.title {
  font-size: 1.5em;
  culoare: violet;
}

În schimb, definiți componente în stil care posedă propriile lor stiluri încapsulate. Apoi le folosești în mod liber pe baza codului tău:

import stilat din „componente stilate”;
const Titlu = stilat.h1`
  font-size: 1.5em;
  culoare: violet;
`;
 Hello World 

Aceasta poate părea o diferență minoră și, de fapt, ambele sintagme sunt foarte similare. Însă diferența esențială este că stilurile fac parte din componenta lor.

Cu alte cuvinte, scăpăm de clasele CSS ca pas intermediar între componentă și stilurile sale.

După cum spune co-creatorul de componente stilate, Max Stoiber:

„Ideea de bază a componentelor stilate este de a aplica cele mai bune practici eliminând maparea între stiluri și componente.”

Complexitate de descărcare

Acest lucru va părea contra-intuitiv la început, întrucât întregul scop de a utiliza CSS în loc de a stiliza direct elementele HTML (amintiți-vă de eticheta ?) Este de a decupla stiluri și marcaj prin introducerea acestui strat de clasă intermediară.

Dar faptul că decuplarea creează, de asemenea, multă complexitate și există un argument care trebuie făcut în comparație cu CSS, un limbaj de programare „real” precum JavaScript este mult mai bine echipat pentru a gestiona această complexitate.

Obiective peste clase

Conform acestei filozofii fără clase, componentele stilate utilizează elemente de recuzită peste clase atunci când vine vorba de personalizarea comportamentului unei componente. Deci, în loc de:

Hello World

// va fi albastru
h1.title {
  font-size: 1.5em;
  culoare: violet;
  
  &.primar{
    Culoarea albastra;
  }
}

Ai scrie:

const Titlu = stilat.h1`
  font-size: 1.5em;
  culoare: $ {props => props.primary? 'albastru': 'violet'};
`;
 Hello World  // va fi albastru

După cum vedeți, componentele stilate vă permit să vă curățați componentele React, păstrând toate detaliile de implementare legate de CSS și HTML.

Acestea fiind spuse, CSS-components-components este încă CSS. Deci, lucrurile de genul acesta sunt, de asemenea, complet valabile (deși ușor non-idiomatic) cod:

const Titlu = stilat.h1`
  font-size: 1.5em;
  culoare: violet;
  
  &.primar{
    Culoarea albastra;
  }
`;
 Hello World  // va fi albastru

Aceasta este o caracteristică care face ca componentele stilate să fie foarte ușor de intrat: atunci când se îndoiește, poți cădea întotdeauna la ceea ce știi!

caveats

De asemenea, este important să menționăm că componentele stilate sunt încă un proiect tânăr și că unele funcții nu sunt încă complet acceptate. De exemplu, dacă doriți să stilați o componentă copil de la un părinte, va trebui să vă bazați pentru a utiliza clasele CSS deocamdată (cel puțin până la apariția componentelor stilate v2).

Nu există încă nici o modalitate „oficială” de a preda CSS-ul pe server, deși este cu siguranță posibilă injectând stilurile manual.

Și faptul că componentele stilate generează propriile nume de clasă aleatorizate poate face dificilă utilizarea instrumentelor dev de browser pentru a vă da seama unde sunt definite inițial stilurile dvs.

Dar ceea ce este foarte încurajator este faptul că echipa de bază a componentelor stilate este conștientă de toate aceste probleme și este greu să lucreze la rezolvarea lor una câte una. Versiunea 2 va veni în curând și chiar o aștept cu nerăbdare!

Aflați mai multe

Obiectivul meu aici nu este să explic în detaliu cum funcționează componentele stilate, ci mai mult să vă oferim o mică privire, astfel încât să puteți decide singuri dacă merită să consultați.

Dacă am reușit să vă fac curios, iată câteva locuri unde puteți afla mai multe despre componentele stilate:

  • Max Stoiber a scris recent un articol despre motivul componentelor stilate pentru Smashing Magazine.
  • Repo-componentele în stil propriu au o documentație extinsă.
  • Acest articol de Jamie Dixon prezintă câteva avantaje ale comutării la componente cu stil.
  • Dacă doriți să aflați mai multe despre modul în care biblioteca este de fapt implementată, consultați acest articol de Max.

Și dacă doriți să mergeți și mai departe, puteți consulta și Glamour, o abordare diferită a noului val CSS!

Timp de auto-promovare: căutăm contribuitori open-source care să ajute cu Nova, cel mai simplu mod de a crea aplicații React & GraphQL cu stivă complet, completate cu formulare, încărcare de date și conturi de utilizator. Încă nu folosim componente stilate, dar ai putea fi primul care le-a implementat!