CSS-moduulit ovat lähestymistapa, jonka avulla CSS-luokkien nimet voidaan rajata paikallisesti tiettyihin komponentteihin. Tämä mahdollistaa CSS-koodin kirjoittamisen modulaarisesti ja kapseloidusti, mikä vähentää tyyliristiriitojen riskiä ja tekee tyyleistä helpommin ylläpidettäviä. CSS-moduuleista onkin tullut yksi käytetyimmistä tavoista organisoida React-projekteja.

Tiedosto- ja kansiorakenne

Oletetaan, että meillä on seuraava käyttöliittymä, joka koostuu kolmesta komponentista: VideoPlayer, AuthorInformation ja VideoDescription.

Emme yhdistä kaikkia komponentteja ja tyylejä yhteen tiedostoon. Sen sijaan luomme jokaiselle komponentille oman kansion. Jokaisen kansion sisälle luodaan jsx-tiedosto renderöintiä ja logiikkaa varten sekä css-tiedosto tyylejä varten. Jokaisen css-tiedoston nimen loppuun lisätään module.css modulaarisuuden saavuttamiseksi. Rakenne näyttää siis seuraavalta:

Huomio

Tämä lähestymistapa tarjoaa kätevän ratkaisun React-komponenttien luomiseen ja tyylien kirjoittamiseen. Se varmistaa, että jokainen komponentti on eristetty ja uudelleenkäytettävissä tehokkaasti. Luokkanimien paikallinen rajaus parantaa koodin järjestystä, edistää uudelleenkäytettävyyttä ja ehkäisee tyyliristiriitoja.

Syntaksi

Tarkastellaan modulaaristen tyylien syntaksia komponentille käyttämällä esimerkkinä VideoDescription-komponenttia.

Tiedostossa VideoDescription.jsx luodaan komponentti, joka tuottaa tietyn rakenteen. Tässä ei ole mitään erityisen uutta tai vierasta.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Ero syntyy, kun haluamme käyttää luokan nimeä. Ensin täytyy tuoda VideoDescription.module.css -tiedosto VideoDescription.jsx -tiedostoon. Tämä onnistuu seuraavalla syntaksilla:

import <file_name> from "<file_path>";

• <file_name> voi olla mikä tahansa sana, jonka yhdistämme tiedostoon. Yleisesti käytetään nimiä kuten: css, styles tai yksinkertaisesti s;
• <file_path> on tiedoston oikea polku. Syntaksi on tuttu: ./.

Tuloksena:

import css from "./VideoDescription.module.css";

Luokan nimen määrittämiseksi elementille voidaan käyttää className-attribuuttia. Tähän attribuuttiin haluttu luokan nimi asetetaan aaltosulkeisiin {}. Sulkeiden sisällä käytetään tyylitiedostoon liitettyä sanaa, jonka jälkeen piste . ja luokan nimi. Esimerkki: className={css.text}. text on varsinainen luokan nimi.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Nyt voidaan avata VideoDescription.module.css -tiedosto ja määrittää tyylit p-elementille, jolla on text-luokan nimi käyttäen luokkavalitsinta:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}