Najnovije objave

Tailwind CSS - najbolje prakse

Matej Rončević 10. kolovoza 2021.

jsv2fncioupdbtf0sbir.jpg

Nakon što sam ga koristio tek na nekoliko projekata, Tailwind mi je zauvijek promijenio mišljenje o pisanju CSS-a i olakšao front-end život. Iz tog razloga htio bih podijeliti svoje iskustvo i mišljenje zašto uopće koristiti ovaj divni izum i kako iz njega izvući ono najbolje.

 

Zašto

 

Tailwind je napravljen sa smislom da bude potpuno prilagodljiv nama developerima. Dolazi s već zadanom konfiguracijom koju je veoma lako “pregaziti” u tailwind.config.js u vašem projektu. Od boja do razmaka i fontova - sve može biti prilagođeno putem ove datoteke.

 

Jedna od prednosti postavljanja konfiguracije u toj datoteci je ta da cijeli style guide možete postaviti tu, na jednom mjestu. Nakon postavljanja,konzistencija razmaka, veličina fontova i ostalo je jako pojednostavljeno za korištenje u vašem projektu.

 

Iznenadili biste se koliko vremena potrošite na imenovanje CSS klasa, a da one imaju nekog smisla; koje klase bi trebale biti specifične? Koje klase bi trebale biti općenite? Koju metodologiju da koristim pri imenovanju klasa? Tailwind rješava i ovaj problem zato što je utility first framework - imenovanje klasa je potpuno izbačeno zato što, u savršenom scenariju, ne biste trebali napisati nijednu custom klasu.

 

Najbolje prakse

 

  1. Kada pišete string s više klasa, uvijek to radite u poretku s nekim smislom. “Koncentrični CSS” pristup radi savršeno s utility klasama (npr. 1. position/visibility, 2. box model, 3. borders, 4. backgrounds, 5. typography, 6. ostali vizualni dodaci). Kada prepoznate “pattern”, pisanje i samo čitanje dužih class stringova će biti mnogo lakše i brže.
  2.  Uvijek koristite manje utility klasa kada je moguće. Primjerice, koristite mx-2 umjesto ml-2 mr-2 i slobodno napišite p-4 lg:pt-8 umjesto duže, kompliciranije verzije pt-4 lg:pt-8 pr-4 pb-4 pl-4.
  3.  Dodajte odgovarajući prefiks za sve klase koje će se koristiti na određenom screenu. Npr. koristite block lg:flex lg:flex-col lg:items-center umjesto block lg:flex flex-col items-center kako biste naglasili da se flexbox i svi njegovi utility koristi samo na lg (pa nadalje) breakpointu.
  4. Imajte na umu da su, po defaultu, sve responsive utility klase postavljene kao min-width. sm: prefix ne primjenjuje se samo na male ekrane; primjenjuje se na male ekrane pa nadalje. Stoga umjesto dužeg block sm:block md:flex lg:flex xl:flex za <div> element, možete jednostavno napisati md:flex. Oboje imaju isti efekt.
  5. Vezano za prethodni paragraph, zapamtite da sm: breakpoint ne počinje s min-width: 0 kako biste možda očekivali. Počinje s min-width: 640px. To znači da ako želite nešto primijeniti na najmanje viewporte (one manje od 640px), morate prvo primijeniti klasu na sve breakpointove pa tek nakon toga pregaziti ju za veći breakpoint. Npr. koristite block sm:inline ako želite da se element prvo prikazuje kao block - samo na najmanjim viewportovima.
  6. Zapamtite da u većini slučajeva možete dodati <div> wrapper element s paddingom umjesto korištenja margina - ovo će vam pomoći izbjeći probleme s margin-collapsingom. Kada već koristite utility-first CSS, ne morate izmišljati semantički točno ime klase za obični <div> wrapper element.
  7. Ako dinamički generirate klase, nemojte koristiti string concatination kako biste kombinirali fragmente za rezultat cijele klase. Umjesto toga, izmjenjujte cjelokupne stringove. Primjerice, koristite {% set width = maxPerRow == 2 ? 'sm:w-1/2' : 'sm:w-1/3' %} umjesto {% set width = 'sm:w-1/' ~ maxPerRow %}. Na taj način vaše klase će “preživjeti” PurgeCSS proces, ako ga koristite.

 

Na samom početku korištenja Tailwinda možda će vam se činiti kako je sve ružno, pa možda čak i pogrešno. Cijeli framework se zapravo protivi “pravilnom” pisanju CSA-a. Ali nakon samo kratkog vremena korištenja navedenog frameworka, primijetit ćete koliko ste brži u pisanju CSS-a i općenito produktivniji. Dugačke klase neće biti problem te će na prvi pogled odmah imati smisla.

footer logo

© Gauss 2021. Sva prava pridržana.