CSS Modules: ograniczone zakresowo nazwy klas
Proszę włączyć CSS Modules w projekcie Vite lub webpack, aby automatycznie ograniczać nazwy klas do pliku komponentu i eliminować wycieki globalnych stylów.
CSS Modules: ograniczone zakresowo nazwy klas to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są CSS Modules
CSS Modules przekształcają nazwy klas podczas budowania, dodając do nich unikatowy skrót i ograniczając ich zakres do pliku komponentu. Klasa o nazwie .card staje się .card_a1b2c3 — przypadkowa kolizja z stylami innych komponentów jest niemożliwa.
Jak działają CSS Modules
Należy zaimportować plik CSS jako obiekt. Właściwości tego obiektu służą jako nazwy klas. Bundlery (Vite, webpack) obsługują tę transformację.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Dynamiczne nazwy klas z clsx
Biblioteka clsx upraszcza warunkowe łączenie nazw klas z CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}Globalny CSS w CSS Modules
Należy używać :global do deklarowania klas, które NIE powinny mieć ograniczonego zakresu. Jest to przydatne przy nadpisywaniu klas bibliotek zewnętrznych.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Kompozycja — rozszerzanie klas
CSS Modules obsługują composes, które umożliwia dziedziczenie stylów z innej klasy, także z innych modułów.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules a style zakresowe (Vue)
Style zakresowe Vue i CSS Modules zapobiegają wyciekom do globalnego zakresu, ale działają inaczej: style zakresowe dodają atrybuty data, a CSS Modules przekształcają nazwy klas. Oba rozwiązania są prawidłowe — CSS Modules działają również w React.
CSS Modules w Vite
Vite obsługuje CSS Modules od razu dla plików kończących się na .module.css. Nie jest wymagana dodatkowa konfiguracja.
TypeScript dla CSS Modules
Należy zainstalować typescript-plugin-css-modules albo wygenerować pliki .d.ts dla CSS Modules za pomocą narzędzia typed-css-modules, aby uzyskać autouzupełnianie nazw klas.
Konwencje nazewnictwa w CSS Modules
Ponieważ nazwy klas stają się właściwościami JavaScriptu, w CSS Modules należy używać nazw klas zapisanych w camelCase: .buttonPrimary zamiast .button-primary (łącznik wymaga dostępu w notacji nawiasowej).
Kiedy używać CSS Modules
CSS Modules doskonale sprawdzają się w aplikacjach React, w których potrzebne są style ograniczone do komponentów, ale pełne rozwiązanie CSS-in-JS byłoby przesadą. Vite + CSS Modules to lekkie rozwiązanie do stylowania bez kosztu w czasie działania.
CSS Modules a CSS-in-JS
CSS Modules: brak kosztu w czasie działania, zwykły CSS, lepsza wydajność. CSS-in-JS (styled-components): dynamiczne style w czasie działania, podejście skoncentrowane na JS. W większości aplikacji CSS Modules są prostsze i szybsze.
Szybkie sprawdzenie
Co dzieje się z nazwą klasy CSS podczas korzystania z CSS Modules?
Podsumowanie: CSS Modules
Pliki .module.css należy importować jako obiekty. Nazwy klas są automatycznie ograniczane do zakresu za pomocą unikatowego skrótu. Należy używać :global() dla celowo globalnych stylów. composes służy do dziedziczenia między modułami. clsx służy do warunkowych nazw klas. Vite natywnie obsługuje CSS Modules. W porównaniu z CSS-in-JS CSS Modules nie generują kosztu w czasie działania.
Często zadawane pytania
Czy lekcja „CSS Modules: ograniczone zakresowo nazwy klas” jest bezpłatna?
Tak — pełny tekst „CSS Modules: ograniczone zakresowo nazwy klas” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „CSS Modules: ograniczone zakresowo nazwy klas”?
Proszę włączyć CSS Modules w projekcie Vite lub webpack, aby automatycznie ograniczać nazwy klas do pliku komponentu i eliminować wycieki globalnych stylów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „CSS Modules: ograniczone zakresowo nazwy klas”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Metodologia BEM: Block, Element, Modifier
- CSS Modules: ograniczone zakresowo nazwy klas
- CSS-in-JS: Styled-components i Emotion
- Tailwind CSS: podejście utility-first