CSS Academy · Lekcja

CSS Modules: style z ograniczonym zakresem

Automatycznie ograniczaj nazwy klas lokalnie do komponentów, używając CSS Modules w konfiguracji procesu budowania.

CSS Modules: style z ograniczonym zakresem to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym są CSS Modules?

CSS Modules automatycznie ograniczają zakres nazw klas CSS do pliku komponentu, w którym zostały zdefiniowane. Każda nazwa klasy jest przekształcana w unikatowy identyfikator podczas budowania — zapobiega to wyciekaniu stylów globalnych.

Konwencja nazewnictwa plików

Plik CSS należy nazwać z rozszerzeniem .module.css (lub .module.scss w przypadku Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Importowanie CSS Modules

Moduł należy zaimportować jako obiekt JavaScript. Nazwy klas stają się właściwościami:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Łączenie klas

Za pomocą composes można rozszerzyć klasę z innego modułu:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Klasy globalne

Za pomocą :global() można wyłączyć lokalne ograniczanie zakresu dla konkretnej klasy:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

CSS Modules w Vite

Vite ma wbudowaną obsługę CSS Modules. Pliki pasujące do wzorca *.module.css są przetwarzane automatycznie:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

CSS Modules w webpack

Moduły należy włączyć w konfiguracji css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Kompozycja nazw klas

Wiele klas modułu można połączyć za pomocą literałów szablonowych lub biblioteki clsx/classnames:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Brak kosztu w czasie działania

CSS Modules są rozwiązywane w całości podczas budowania — w czasie działania nie występuje dodatkowy narzut JavaScriptu. Wynikiem jest standardowy CSS ze zmienionymi nazwami klas. Dzięki temu CSS Modules doskonale nadają się do aplikacji, w których wydajność ma kluczowe znaczenie.

Obsługa TypeScript

Definicje typów TypeScript dla CSS Modules można generować za pomocą typed-css-modules lub konfiguracji cssModuleTypes w Vite, aby zapewnić bezpieczny typowo dostęp do nazw klas.

CSS Modules a CSS-in-JS

Porównanie CSS Modules:

Tylko podczas budowania — brak kosztu JavaScriptu w czasie działania
Integracja ze standardowym CSS/Sass — znajoma składnia
Brak dynamicznych stylów za pomocą interpolacji w JavaScript
Mniejsza elastyczność w przypadku dynamicznych stylów zależnych od motywu niż w styled-components/Emotion

Szybki test

W jaki sposób CSS Module zapobiega kolizjom nazw klas między dwoma różnymi plikami komponentów?

Podsumowanie

CSS Modules automatycznie ograniczają zakres nazw klas, przekształcając je w unikatowe identyfikatory podczas budowania. Należy importować je jako obiekty JavaScript i uzyskiwać dostęp do klas jako właściwości. :global() służy do wyłączenia ograniczania zakresu dla globalnych selektorów, a composes do kompozycji klas. Brak kosztu w czasie działania oraz pełna obsługa składni CSS/Sass sprawiają, że CSS Modules są lekką alternatywą dla CSS-in-JS w przypadku stylów statycznych.

Często zadawane pytania

Czy lekcja „CSS Modules: style z ograniczonym zakresem” jest bezpłatna?

Tak — pełny tekst „CSS Modules: style z ograniczonym zakresem” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „CSS Modules: style z ograniczonym zakresem”?

Automatycznie ograniczaj nazwy klas lokalnie do komponentów, używając CSS Modules w konfiguracji procesu budowania. Ćwiczysz CSS 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ąć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS 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 3 z 4.

Ile czasu zajmuje lekcja „CSS Modules: style z ograniczonym zakresem”?

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 CSS Academy?

Tak. Każda lekcja CSS 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

Styled-components: literały szablonowe z tagami
Emotion: css() i styled()
CSS Modules: style z ograniczonym zakresem
Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania

← Powrót do CSS Academy