33. CSS Modules — lokalne zakresy stylów w React

CSS Modules — koniec z konfliktami klas

CSS Modules to system gdzie nazwy klas CSS są automatycznie hashowane przez bundler (Vite/Webpack) do unikalnych identyfikatorów (button_abc123). Eliminuje konflikty nazw klas między komponentami. Plik .module.css jest “prywatny” dla komponentu.

Global CSS w dużych projektach prowadzi do konfliktów klas, niespodziewanych nadpisań i trudnych do debugowania błędów. CSS Modules rozwiązuje to bez potrzeby konwencji nazewnictwa.

1. Wyjaśnić problem globalnych klas CSS w aplikacjach React
2. Opisać jak CSS Modules działają — hashowanie klas przez bundler
3. Pokazać import i użycie w komponentach React
4. Porównać z innymi podejściami do stylowania

1. Problem global CSS — konflikty, cascade, specificity wars
2. CSS Modules — plik .module.css, import jako obiekt
3. Użycie klas — styles.button, styles[variant]
4. composes — dziedziczenie klas w CSS Modules
5. Porównanie — global CSS vs CSS Modules vs Tailwind vs CSS-in-JS

• Struktura minimalna

1. Wstęp — problem stylowania w komponentach React
2. Rozdział 1: CSS Modules — jak działają, składnia
3. Rozdział 2: Wzorce użycia — warianty, kombinowanie
4. Rozdział 3: Porównanie z innymi metodami
5. Podsumowanie
6. Bibliografia

CSS Modules = hermetyzacja stylów!

Pokaż w DevTools że klasa button z CSS Modules staje się button_f7a3b8 w HTML. To konkretna demonstracja lokalności klas.