Frontend Academy · Oppitunti

CSS Modules: rajatut luokan nimet

Ota CSS Modules käyttöön Vite- tai webpack-projektissa, jotta luokan nimet rajataan automaattisesti komponenttitiedostoon ja globaalien tyylien vuotaminen estyy

Oppitunti 2/413 vaihetta

CSS Modules: rajatut luokan nimet on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä CSS Modules on

CSS Modules muuntaa luokkien nimet käännösvaiheessa lisäämällä niihin yksilöllisen tiivisteen ja rajaa ne komponenttitiedostoon. Luokasta .card tulee .card_a1b2c3, joten se ei voi vahingossa törmätä muiden komponenttien tyyleihin.

Miten CSS Modules toimii

Tuokaa CSS-tiedosto objektina. Käyttäkää objektin ominaisuuksia luokkien niminä. Bundlerit (Vite, webpack) käsittelevät muunnoksen.

// 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>
  );
}

Dynaamiset luokkien nimet clsx:n avulla

clsx-kirjasto yksinkertaistaa ehdollista luokkien nimien koostamista CSS Modulesin kanssa.

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>
  );
}

Globaali CSS CSS Modulesissa

Käyttäkää :global-merkintää määrittämään luokat, joita EI pidä rajata paikallisiksi. Tämä on hyödyllistä kolmannen osapuolen kirjastojen luokkien ylikirjoittamiseen.

/* Scoped: */
.container { padding: 16px; }

/* Global (not scoped): */
:global(.react-datepicker) {
  font-family: inherit;
}

Koostaminen — luokkien laajentaminen

CSS Modules tukee composes-määritystä, jolla tyylejä voi periä toiselta luokalta, myös toisista moduuleista.

/* 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 ja rajatut tyylit (Vue)

Vuen rajatut tyylit ja CSS Modules estävät molemmat tyylien vuotamisen globaaliin nimiavaruuteen, mutta toimivat eri tavoin: rajatut tyylit lisäävät data-attribuutteja, kun taas CSS Modules muuntaa luokkien nimet. Molemmat ovat toimivia vaihtoehtoja, ja CSS Modules toimii myös Reactissa.

CSS Modules Vitessä

Vite tukee CSS Modulesia suoraan tiedostoissa, joiden pääte on .module.css. Lisämäärityksiä ei tarvita.

TypeScript CSS Modulesille

Asentakaa typescript-plugin-css-modules tai luokaa CSS Modulesille .d.ts-tiedostot typed-css-modules-työkalulla, jotta saatte luokkien nimille automaattisen täydennyksen.

Nimeämiskäytännöt CSS Modulesissa

Koska luokkien nimistä tulee JavaScript-ominaisuuksia, käyttäkää CSS Modulesissa luokkien nimissä camelCase-tyyliä: .buttonPrimary mieluummin kuin .button-primary (yhdysmerkkiä sisältävään nimeen tarvitaan hakasulkumerkintä).

Milloin CSS Modulesia kannattaa käyttää

CSS Modules sopii erinomaisesti React-sovelluksiin, joissa tarvitaan komponenttikohtaisia tyylejä mutta kokonainen CSS-in-JS-ratkaisu olisi tarpeettoman raskas. Vite ja CSS Modules muodostavat kevyen tyyliratkaisun ilman ajonaikaista suoritusympäristöä.

CSS Modules ja CSS-in-JS

CSS Modules: ei ajonaikaista suoritusympäristöä, tavallinen CSS ja parempi suorituskyky. CSS-in-JS (styled-components): tyylit luodaan dynaamisesti ajon aikana, ja lähestymistapa perustuu ensisijaisesti JavaScriptiin. Useimmille sovelluksille CSS Modules on yksinkertaisempi ja nopeampi.

Pikatarkistus

Mitä CSS-luokan nimelle tapahtuu, kun käytätte CSS Modulesia?

Vastaa interaktiivisessa oppitunnissa

Kertaus: CSS Modules

Tuokaa .module.css-tiedostot objekteina. Luokkien nimet rajataan automaattisesti yksilöllisellä tiivisteellä. Käyttäkää :global()-merkintää tarkoituksellisesti globaaleihin tyyleihin. Käyttäkää composes-määritystä moduulien väliseen perintään. Käyttäkää clsx:ää ehdollisiin luokkien nimiin. Vite tukee CSS Modulesia suoraan. Ajonaikaista yleiskustannusta ei synny, toisin kuin CSS-in-JS-ratkaisuissa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”CSS Modules: rajatut luokan nimet” ilmainen?

Kyllä – oppitunnin ”CSS Modules: rajatut luokan nimet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”CSS Modules: rajatut luokan nimet”?

Ota CSS Modules käyttöön Vite- tai webpack-projektissa, jotta luokan nimet rajataan automaattisesti komponenttitiedostoon ja globaalien tyylien vuotaminen estyy Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”CSS Modules: rajatut luokan nimet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

BEM-metodologia: Block, Element ja Modifier
CSS Modules: rajatut luokan nimet
CSS-in-JS: Styled-components ja Emotion
Tailwind CSS:n utility-first-lähestymistapa

← Takaisin: Frontend Academy