Przewodnik technologiczny

Najpierw kontekst, potem technologia

Nie ma jednego słusznego stacku. Jest projekt klienta, jego treść i jego użytkownicy, a technologia ma im służyć. Ten przewodnik porządkuje wybory, które zespół podejmuje na starcie: czym stylować, na czym budować i od którego ekranu zacząć. Spoiler: zawsze od mobile.

Trzy konteksty, trzy różne projekty

Ekrany referencyjne 390 i 1440 px są wspólne, ale to, co na nich stoi, zależy od charakteru projektu. Inaczej projektuje się SaaS, inaczej witrynę korporacji.

SaaS i aplikacje

Gęstość informacji, tabele, formularze i długie sesje pracy. Skala typograficzna ciaśniejsza, komponenty stanów ważniejsze niż ozdoby, desktop używany najczęściej, ale projektowany po mobile.

Stany widokuOptymistyczny interfejsGęsta typografia

Witryna korporacyjna

Powietrze, duża typografia i narracja marki. Mało interakcji, dużo treści i obrazów, SEO oraz szybkość pierwszego wejścia decydują o wszystkim.

Zero zbędnego JSObrazy bez CLSPłynna skala

E-commerce i treści

Listy, filtry, karty produktów i obrazy w roli głównej. Core Web Vitals przekłada się wprost na konwersję, a każda rewizja layoutu kosztuje sprzedaż.

Budżet wydajnościSkeletony 1:1Karuzele natywne

Czym stylować

Tailwind CSS

zero runtime

Kiedy: Domyślny wybór dla zespołów produktowych: tokeny w @theme, style widoczne w markupie, zero runtime, pełna zgodność z Server Components. Świetnie współpracuje z AI, bo cały kontekst stylu jest w jednym pliku.

Unikaj: Gdy zespół utrzymuje dojrzały system w czystym CSS z silnymi konwencjami i nie ma powodu go porzucać.

CSS Modules

zero runtime

Kiedy: Małe witryny i projekty, w których liczy się prostota bez zależności. Zero runtime, pełna kontrola, działa wszędzie.

Unikaj: Przy dużych systemach: warianty, tokeny i spójność trzeba utrzymywać ręcznie.

vanilla-extract

zero runtime

Kiedy: Design systemy w TypeScript, gdzie tokeny mają być typowane, a style kompilowane do statycznego CSS. Zero runtime jak w Tailwindzie, ale z typami zamiast klas.

Unikaj: Gdy zespół nie żyje w TypeScript albo projekt nie uzasadnia dodatkowej warstwy kompilacji.

styled-components i Emotion

tylko utrzymanie

Kiedy: Utrzymanie istniejących projektów, które już na nich stoją.

Unikaj: W nowych projektach: styl liczony w przeglądarce spowalnia render i nie działa w Server Components. To wzorzec poprzedniej dekady.

Na czym budować

Aplikacje i produkty

Next.js

SaaS, e-commerce z dynamiką, wszystko z logowaniem i danymi na żywo. Server Components trzymają logikę przy danych, streaming skraca czas do treści, a jeden framework obsługuje front i backend.

Witryny i treści

Astro

Strony korporacyjne, portfolio, blogi i dokumentacje. Domyślnie wysyła zero JavaScript, a interaktywność dodaje wyspami tylko tam, gdzie naprawdę jest potrzebna.

Aplikacje formularzowe

React Router / Remix

Aplikacje zbudowane wokół nawigacji i formularzy, gdzie model żądanie i odpowiedź jest naturalny. Mniej magii niż w Next, bliżej platformy webowej.

Panele wewnętrzne

Vite + SPA

Narzędzia za loginem bez wymagań SEO: dashboardy, panele administracyjne, narzędzia zespołowe. Najprostszy model mentalny i najszybszy development.

React

Największy ekosystem, Server Components, domyślny wybór przy pracy z AI i przy rotacji ludzi w zespole. Bezpieczna, nudna, dobra decyzja.

Vue

Szybszy start i mniej boilerplate, szablony bliskie HTML, Nuxt dorównuje Nextowi. Świetny, gdy zespół woli konwencję od elastyczności.

Svelte

Najmniej kodu i znakomite animacje, kompilator zamiast runtime. Rozsądny w produktach z małym zespołem, rynek pracy wciąż mniejszy.

Gotowe recepty

SaaS B2B

Next.js + React + Tailwind

Server Components dla list i raportów, optymistyczny interfejs dla akcji, cztery stany widoku od pierwszego sprintu.

Witryna korporacyjna

Astro + Tailwind

Wyspy tylko przy formularzu kontaktowym i nawigacji, obrazy przez CDN z aspect-ratio, budżet: zero skoków layoutu.

Panel wewnętrzny

Vite + React Router + Tailwind

SPA bez SSR, agresywny cache zapytań, tabular-nums w każdej tabeli, skeletony 1:1 dla wolnych raportów.

Sklep internetowy

Next.js + RSC + Tailwind

Streaming karty produktu, fetchpriority dla hero, karuzele na scroll-snap, Core Web Vitals jako twardy budżet w CI.

Projekt	Stack	Na co uważać
SaaS B2B	Next.js + React + Tailwind	Server Components dla list i raportów, optymistyczny interfejs dla akcji, cztery stany widoku od pierwszego sprintu.
Witryna korporacyjna	Astro + Tailwind	Wyspy tylko przy formularzu kontaktowym i nawigacji, obrazy przez CDN z aspect-ratio, budżet: zero skoków layoutu.
Panel wewnętrzny	Vite + React Router + Tailwind	SPA bez SSR, agresywny cache zapytań, tabular-nums w każdej tabeli, skeletony 1:1 dla wolnych raportów.
Sklep internetowy	Next.js + RSC + Tailwind	Streaming karty produktu, fetchpriority dla hero, karuzele na scroll-snap, Core Web Vitals jako twardy budżet w CI.

Reguły podejmowania decyzji

Mobile first zawsze: projekt zaczyna się od 390 px, desktop jest rozszerzeniem, nie punktem wyjścia.
Kontekst klienta przed preferencją zespołu: gęsty SaaS i przewiewna witryna to inne skale, inne komponenty i inne budżety.
Zero runtime dla stylów w nowych projektach: CSS powstaje w buildzie, nie w przeglądarce użytkownika.
Nudna, znana technologia wygrywa z modną, chyba że projekt istnieje właśnie po to, żeby nową sprawdzić.
Referencje 390 i 1440 to punkty kalibracji, nie mury: breakpointy wynikają z treści projektu, nie z urządzeń.