Czy CSS może znowu sprawiać frajdę?
Kiedy ostatnio, pracując jako frontend-developer, miałeś autentyczny fun? Czy nie jest tak, że im więcej kodujesz stron, tym bardziej generyczne się one stają – a radość z pracy maleje? Pokażę Ci mój sposób na to, jak cieszyć się kodowaniem i jednocześnie dostarczać wysokiej jakości rozwiązania.
Utility-first czy nie utility-first – oto jest pytanie
W sieci toczy się mała wojna między zwolennikami i przeciwnikami podejścia utility-first. Nie będę rozkładał na czynniki pierwsze argumentów obu stron. Skupię się na tym, co dla mnie najważniejsze – zaletach tego podejścia i powodach, dla których potrafi dawać czystą frajdę.
Czym jest utility-first?
To sposób pisania CSS, w którym zamiast tworzyć własne klasy korzystasz z gotowych klas funkcyjnych. Jak z klocków Lego – budujesz coś nowego z istniejących elementów.
Zamiast definiować własną klasę:
.btn-primary {
background-color: oklch(43.8% 0.218 303.724);
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
Po prostu w kodzie HTML piszesz:
<button class="bg-purple-800 py-2 px-4 rounded-sm">
I gotowe.
Jak zacząć?
Istnieje kilka narzędzi wspierających utility-classes, ale najpopularniejsze (i najpotężniejsze) to Tailwind CSS.
Zalety Tailwind CSS
- Szybkość budowania
Buildy są błyskawiczne, a incremental builds praktycznie natychmiastowe. Oszczędzasz czas zwłaszcza w dużych projektach. - Obsługa nowoczesnego CSS
@layer, @property, color-mix(), container queries – wiele nowości masz „out of the box”. - Konfiguracja CSS-first
Dzięki dyrektywie @theme możesz konfigurować setup bezpośrednio w CSS, bez żonglowania kontekstami. - Rozbudowane warianty i utilities
not-*, zaawansowane transformacje 3D, różne rodzaje gradientów i wiele więcej.
Wady Tailwind CSS
Nie ma róży bez kolców:
- Czytelność i utrzymanie
„Makaron w kodzie” to najczęstszy zarzut. Duża liczba klas w HTML-u może wyglądać nieczytelnie i utrudniać późniejsze zmiany. - Braki w utilities
Nie wszystkie właściwości CSS mają gotowe odpowiedniki. Czasem trzeba dopisać własne. - Krzywa uczenia się
To trochę inna filozofia. Trzeba czasu, by przestawić sposób myślenia – szczególnie, że CSS sam w sobie dynamicznie się rozwija.
Gdzie w tym wszystkim frajda?
Magia Tailwind CSS polega na tym, że konfigurujesz wstępnie plik CSS, a później skupiasz się wyłącznie na HTML-u. Nie musisz już skakać między plikami – widzisz efekty od razu, bez głowienia się nad nazewnictwem klas. To naprawdę przyspiesza pracę i daje satysfakcję.
Z Tailwindem pracuję od około 3 lat. Zbudowałem w tym czasie zarówno małe strony, jak i większe projekty. Za każdym razem miałem poczucie lekkości i satysfakcji z szybkiego postępu. Co najważniejsze – nigdy nie dopadło mnie znużenie samym projektem (ech, kiedy wreszcie koniec…).
Co ważne – Tailwind nie zastępuje CSS. Bardziej zaawansowane style nadal piszesz samodzielnie. Wciąż będziesz sięgał do dokumentacji MDN czy oglądał tutoriale na YouTube. To dobrze – bo nie rdzewiejesz i rozwijasz się jako programista.
To co – przesiadać się od razu?
Niekoniecznie. Moim celem nie jest przekonywanie Cię, że utility-first to jedyne słuszne podejście. Chciałem pokazać alternatywę, która może odświeżyć workflow i dodać frajdy w codziennym kodowaniu.
Komentarze (0)