CSS-in-JS este la modă. Dar este într-adevăr cea mai bună opțiune?

Rezolvarea problemelor pe care nu trebuie să le rezolvați

Nu mă înțelegeți greșit, CSS-in-JS este o soluție excelentă, dar este pentru o problemă pe care majoritatea oamenilor nu o au. Menținerea componentelor într-o abordare foarte silențioasă ajută absolut lucruri precum:

  • Efecte secundare neintenționate ale stilurilor în cascadă
  • Ajutarea echipelor să-și organizeze regulile
  • Evitând să vă călcați pe degetele de la picioare în timp ce vă dezvoltați

Dar acestea chiar devin probleme doar cu echipele mari, cu mulți dezvoltatori și o vastă bibliotecă de componente.

Deci, ce vrei să folosesc?

Pentru a începe dintr-un punct de vedere puțin mai ridicat, vă puteți obișnui cu câteva idei de bază:

  • Stabiliți și respectați câteva reguli de bază pentru scriere
  • Folosiți instrumente sau setați standarde pentru organizație
  • Dezvoltarea cu metodologii precum BEM

Acest lucru va elimina oricare dintre aceste preocupări pentru un proiect mai mic (sau mare) și poate face viața mai ușoară.

La ce este bun CSS-in-JS …

Ajutarea echipelor mari să păstreze sănătatea

O parte din motivul pentru care există această soluție se datorează faptului că echipelor foarte mari le este greu să evite conflictele atunci când au o bibliotecă imensă cu care să se ocupe. Posibilitatea de a avea componenta dvs. și orice lucru care o afectează într-o zonă compartimentată îi ajută pe oameni să evite pasul pe picioarele celuilalt și potențialul să-și desfășoare modificări care, în mod neintenționat, se încadrează în aplicație. Acest lucru este extraordinar, dar cel mai probabil este faptul că sunteți unul dintre câțiva (sau singur) care lucrează la o aplicație mică. Dacă dumneavoastră și echipa dvs. nu comunicați despre unele reguli și standarde de bază, aș susține că aveți probleme mai mari.

Un fel elimină necesitatea de a învăța CSS (un fel de)

Unii dezvoltatori batjocoresc CSS spunând că nu este cod real, alții se tem de magie (nu fi, îmbrățișează-l). Faptul că trebuie să vă faceți griji cu privire la câteva reguli dintr-o componentă ajută la relaxarea mintii oamenilor, știind că este doar un pic mai mult JS care schimbă aspectul său.

Ce pot face amândoi?

Nu aveti nevoie de CSS in JS De ce si cand folosesc
CSS arătând spre CSS

Reîncărcare modul fierbinte (HMR)

Deși unii spun că un avantaj pentru CSS-in-JS este HMR, veți găsi că acest lucru funcționează bine cu foile de stil. Uneori funcționează puțin mai bine dacă lucrați la o componentă care necesită o redare, cum ar fi cele cu o solicitare de rețea ca dependență, în cazul în care modificările CSS nu vor forța redarea.

Variabile, Setări globale

Dacă cineva susține că CSS nu poate face acest lucru, este pentru că nu a fost atent de ceva vreme. Sass nu numai că oferă acest lucru, este originar din browserele moderne.

Incapsularea

Da, nu aveți nevoie de JS pentru a face acest lucru. Adăugați un nume de clasă la elementul de nivel superior al componentei sau paginii, cuibrați toate stilurile în interior și aveți încapsularea.

.page-about {
  .header {
    background-color: red;
  }
}

.navigation {
  .button {
    background-color: blue;
  }
}

Linting

https://stylelint.io/

Mult mai mult

Sincer, probabil că există multe altele pe care le fac ambele în mod similar, de care pur și simplu nu îți dai seama.

Ce foi de stil și SASS fac mai bine …

Partajarea și configurarea regulilor

SASS vă permite să configurați variabile, funcții personalizate și mix-uri care duc dezvoltarea CSS la nivelul următor.

Ignorând numele selectorului rău:

// settings.scss

$color-ultraviolet: #5F4B8B;

// colbys-styles.scss

@import "settings";

.colbys-text-color {
  color: $color-ultraviolet
}

.colbys-background-color {
  background-color: $color-ultraviolet
}

În timp ce sintaxa și configurația acesteia sunt, fără îndoială, mai ușoare decât configurarea unui grup de configurații de obiecte în JS, acest lucru vă permite foarte mult să oferiți experiențe vizuale consistente și să vă uscați codul.

Proiectare receptivă

Unul dintre multele lucruri care se adaugă rolului unui bun inginer frontal este să acorde atenție modului în care va arăta proiectul pe mai multe dispozitive și dimensiuni. În general, UX este treaba tuturor. Dezvoltarea cu o mentalitate receptivă nu numai că face acest proces mai ușor, ci ajută la construirea unui produs mai bun.

Încercarea de a face componentele dvs. receptive în JS înseamnă mai mult Javascript și mai mulți ascultători de evenimente. Acest lucru nu numai că adaugă complexitate, ci atinge performanța. Putem face acest lucru mult mai ușor cu interogările media introduse direct în CSS.

.colbys-sidebar {
  width: 100%;
}

// NO EVENT LISTENERS

@media (min-width: 1024px) {
  .colbys-sidebar {
    width: 25%;
  }
}

În loc să trebuiască să strângeți ascultătorii de evenimente, să vă asigurați că ascultătorii dvs. de evenimente se anulează și nu se ocupă doar de organizarea tuturor în „modul în care reacționează”, interogările media declanșează la cerere și vă vor schimba stilurile, după cum este necesar, într-un mod mai consistent. .

Mai puțină complexitate a componentelor dvs.

Posibilitatea de a vă concentra asupra funcționalității și a rezultatului redat vă permite să evitați să atrageți biblioteci sau metode complexe pentru a corela în mod esențial CSS în JS, fără a menționa hack-ul JS sau două sau trei pe care le utilizați pentru a-l face să funcționeze în primul loc.

// This is an exaggeration

const styles = {
  color: blue;
}

if ( whos_favorite === 'Colby' || whos_favorite === 'Lord Commander' ) {
  styles.color="ultraviolet";
} else if ( whos_favorite === 'The Gary' ) {
  styles.color="red";
} else if ( whos_favorite === 'Mooncake' ) {
  styles.color="green";
} else if ( whos_favorite === 'HUE' ) {
  styles.color="blue";
} else if ( whos_favorite === 'KVN' ) {
  styles.color="yellow";
}

<MyCompnent styles={styles} />

Performanţă

Mai puțin Javascript este întotdeauna o victorie. Browserul dvs. trebuie să se încarce mai puțin, mai puțin browserul dvs. trebuie să compileze, ceea ce se va traduce în cele din urmă la o viteză mai rapidă a paginii. Când browserul încarcă o pagină, încearcă să optimizeze cât mai mult HTML și CSS. Da, probabil că încărcați mai multe CSS în avans, dar mai mult JS este foarte costisitor și este, de asemenea, mai probabil forțați o redare completă;

O mulțime de micii biți magici pe care îi faceți cu Javascript pot fi realizate cu câteva metode de animație CSS destul de puternice, răsfoiți puțin Codepen sau verificați ceva de genul Animista.

De fapt, nu am nicio cifră deoparte din câteva note bune si ceva Puncte de referință CSS-in-JS. A făcut cineva treaba cu asta?

La sfârșitul zilei, faceți ceea ce este eficient

1611289867 148 Nu aveti nevoie de CSS in JS De ce si cand folosesc

Toată lumea are o preferință personală, toată lumea este productivă într-un mod diferit. Faceți ce este mai bun pentru dvs., faceți ce este mai bun pentru echipa dvs. și evitați să tratați ceea ce spun alți dezvoltatori drept drepturi dogmatice și greșeli.

Dacă sunteți un dezvoltator singuratic într-un proiect și doriți să practicați CSS-in-JS pentru a vă obișnui atunci când faceți parte dintr-o echipă mare, mergeți la el! Dacă faceți parte dintr-o echipă imensă, imensă la Facebook și doriți să folosiți foi de stil, este posibil să întâmpinați probleme dacă toată lumea nu respectă aceleași linii directoare, dar faceți ceea ce este mai bine pentru dvs. și echipa dvs.

Singurul mod în care vă puteți da seama este prin experiență și experimentare. Jucați-vă cu ambele soluții și aflați de ce credeți că una este mai bună decât cealaltă. Nu știi niciodată unde vei ajunge după ce ai aterizat acel concert la Google sau noul tău startup în garajul tău.

Publicat inițial la https://www.colbyfayock.com/2019/07/you-dont-need-css-in-js-why-i-use-stylesheets.