CSS Modules - Izolowane Panele Sterowania

CSS Modules to jeden z najpopularniejszych sposobów stylowania w React. Działa jak system izolowanych paneli sterowania na statku kosmicznym -- każdy moduł ma swoje własne kontrolki, które nie koliduja z innymi.

Czym sa CSS Modules?

CSS Modules to zwykle pliki CSS z rozszerzeniem

.module.css

. Roznica polega na tym, że wszystkie nazwy klas sa automatycznie unikalne -- React generuje unikalne identyfikatory, dzięki czemu style z jednego komponentu nigdy nie nadpisza stylow innego.

1/* SpacePanel.module.css */
2.panel {
3  background: #0d1137;
4  border: 2px solid #3949ab;
5  border-radius: 12px;
6  padding: 20px;
7}
8
9.title {
10  color: #7c4dff;
11  font-size: 24px;
12  margin-bottom: 16px;
13}
14
15.statusActive {
16  color: #00e676;
17  font-weight: bold;
18}

Importowanie i uzywanie

Importujemy CSS Module jako obiekt i odwolujemy sie do klas jak do właściwości obiektu:

1import styles from './SpacePanel.module.css';
2
3function SpacePanel({ title, status }) {
4  return (
5    <div className={styles.panel}>
6      <h2 className={styles.title}>{title}</h2>
7      <span className={styles.statusActive}>
8        Status: {status}
9      </span>
10    </div>
11  );
12}

W wygenerowanym HTML klasa

panel

stanie sie czyms w stylu

SpacePanel_panel_x7k2f

-- całkowicie unikalna!

Laczenie klas

Czesto potrzebujemy łączyć kilka klas CSS. W CSS Modules możemy to robic na kilka sposobów:

1// Template literal
2<div className={`${styles.panel} ${styles.dark}`}>
3
4// Z warunkiem
5<div className={`${styles.panel} ${isActive ? styles.active : ''}`}>
6
7// Tablica z join
8<div className={[styles.panel, styles.dark].join(' ')}>

Compose -- dziedziczenie stylow

CSS Modules oferuja specjalna dyrektywe

composes

, która pozwala dziedziczyc style z innych klas:

1/* base.module.css */
2.baseButton {
3  padding: 10px 20px;
4  border: none;
5  border-radius: 6px;
6  cursor: pointer;
7  font-size: 14px;
8  transition: all 0.3s ease;
9}
10
11/* SpaceButton.module.css */
12.primaryButton {
13  composes: baseButton from './base.module.css';
14  background: #7c4dff;
15  color: white;
16}
17
18.dangerButton {
19  composes: baseButton from './base.module.css';
20  background: #f44336;
21  color: white;
22}

Dzięki

composes

unikamy duplikowania stylow, zachowujac jednocześnie izolacje.

Globalne style w CSS Modules

Jeżeli potrzebujesz klasy globalnej (np. dla zewnetrznych bibliotek), uzyj

:global

:

1/* Layout.module.css */
2:global(.container) {
3  max-width: 1200px;
4  margin: 0 auto;
5}
6
7.localClass {
8  /* To jest lokalne */
9  color: #64b5f6;
10}

Dynamiczne klasy z CSS Modules

Czesto potrzebujemy zmieniać style na podstawie propsow lub stanu. Oto kilka wzorcow:

1import styles from './Alert.module.css';
2
3function Alert({ type = 'info', message }) {
4  // Dynamiczne wybieranie klasy na podstawie propsa
5  const alertClass = styles[type]; // styles.info, styles.warning, styles.error
6
7  return (
8    <div className={`${styles.alert} ${alertClass}`}>
9      <p className={styles.message}>{message}</p>
10    </div>
11  );
12}

1/* Alert.module.css */
2.alert {
3  padding: 16px;
4  border-radius: 8px;
5  border-left: 4px solid;
6}
7
8.info {
9  background: #1a237e;
10  border-color: #64b5f6;
11  color: #90caf9;
12}
13
14.warning {
15  background: #4a3800;
16  border-color: #ffa726;
17  color: #ffcc80;
18}
19
20.error {
21  background: #4a0000;
22  border-color: #f44336;
23  color: #ef9a9a;
24}

Zwroc uwage, że

styles[type]

pozwala dynamicznie wybierac klase na podstawie zmiennej -- to jak przelaczanie trybow na panelu sterowania.

Biblioteka classnames / clsx

Do bardziej zlozonych kombinacji klas warto uzywac biblioteki

clsx

lub

classnames

:

1import clsx from 'clsx';
2import styles from './Button.module.css';
3
4function SpaceButton({ variant, size, disabled }) {
5  return (
6    <button className={clsx(
7      styles.button,
8      styles[variant],     // styles.primary lub styles.secondary
9      styles[size],         // styles.small lub styles.large
10      { [styles.disabled]: disabled }  // warunkowo
11    )}>
12      Engage!
13    </button>
14  );
15}

Zalety CSS Modules

• Izolacja stylow -- brak konfliktow nazw klas, każdy komponent ma swoja "kapsuie"
• Zwykly CSS -- nie trzeba sie uczyc nowej skladni, używasz tego samego CSS co zawsze
• Wsparcie natywne w Create React App i Next.js -- zero konfiguracji
• Lekkosc -- brak dodatkowych bibliotek w bundlu, zero runtime JS
• Latwa migracja z istniejacego CSS -- wystarczy zmienic rozszerzenie pliku i import
• Typowanie -- mozna generowac typy TypeScript dla klas CSS (np. przez

  typed-css-modules

  )

CSS Modules to solidny, sprawdzony wybor do stylowania komponentow React. Sa jak niezawodne panele sterowania na statku -- proste, przewidywalne i bezkonfliktowe.