Tema
/
HTML ir CSS pagrindai HTML
Pamoka 7 / 7 Karkasai — kada jie verti savo vietos ~40 min
Teorija

Dvi rūšys ir kaip rinktis

Ne visi karkasai mainosi vienodai. Yra dvi plačios rūšys, ir jų atskyrimas — didžioji dalis to, kaip žinoti, kurio griebtis.

Komponentiniai karkasai prieš utilitarinius

Komponentiniai karkasai — Bootstrap yra pavyzdys — paduoda tau baigtus gabalus. card, navbar, btn: įdedi komponentą ir pripildai jį turinio, o apiforminimo sprendimai jau padaryti. Greita, bet išvaizda — karkaso.

Utilitariniai karkasai (utility-first) — Tailwind yra pavyzdys — daro priešingai. Jie duoda šimtus mažų, vienos paskirties klasių — flex, pt-4, text-lg, rounded-xl — kiekviena atliekanti iš esmės vieną CSS deklaraciją. Jas komponuoji tiesiai savo žymėjime, kad sukurtum savo komponentus:

<article class="flex flex-col rounded-xl border overflow-hidden">
  <img class="w-full h-52 object-cover" src="…" alt="…">
  <div class="p-4">
    <h2 class="text-base leading-snug">A Dust Angel Nebula</h2>
    <p class="text-sm text-slate-400">2016-04-28</p>
  </div>
</article>

Tai ne kažkieno kito kortelė — tai tavo kortelė iš trečios pamokos, užrašyta kaip trumpinys CSS, kurį jau moki. Vis tiek priimi kiekvieną dizaino sprendimą; tik niekada nepalieki HTML ir neatveri stiliaus failo. Kliūtis — kaip tik tame reikalavime: utility-first veikia tik tada, jei moki CSS, kurį utilitos atstoja. h-52 object-cover įskaitoma tik todėl, kad pirma parašei height: 200px; object-fit: cover ranka. Būtent todėl utility-first ateina po CSS mokymosi, niekada ne vietoj jo.

Kaip rinktis — sąžiningas vadovas

Visuotinai teisingo atsakymo nėra; yra teisingas atsakymas kiekvienam projektui. Apytiksliai:

  • Griebkis komponentinio karkaso, kai greitai pristatai standartinę sąsają — administravimo skydelį, vidinį įrankį — komanda jį jau moka, o dizainas nėra išskirtinumas. Greitis ir nuoseklumas — visas laimėjimas.
  • Griebkis utility-first, kai nori to greičio ir kontrolės, tavo komanda moka CSS, ir nori savo dizaino, o ne karkaso numatytos išvaizdos — nerašydamas atskirų stiliaus failų.
  • Griebkis rankomis rašyto CSS — ką čia darei — kai mokaisi; kai dizainas išskirtinis ir apibrėžia prekės ženklą; kai našumo biudžetas įtemptas ir kiekvienas kilobaitas svarbus; arba kai svetainė pakankamai maža, kad karkasas būtų daugiau svorio nei sutaupo.

Kodėl svarbu, kad sudėjai pats

Štai ką tos šešios pamokos tau iš tikrųjų nupirko: gebėjimą tą pasirinkimą padaryti gerai. Tas, kuris pradeda nuo Bootstrap, negali pasakyti, ar jo reikia — Bootstrap yra viskas, ką jis moka, tad kiekviena problema atrodo kaip Bootstrap problema. Tu gali perskaityti, ką bet koks karkasas sugeneruoja, atpažinti mygtuką, tinklelį ir kortelę po juo, nes kiekvieną esi sudėjęs, ir nuspręsti, kiekvienam projektui, ar karkasas atsveria savo svorį. Ta nuovoka ir yra tikras įgūdis. Karkasas — tik įrankis, kurį dabar esi kvalifikuotas paimti — arba padėti.