CSS modulok

A CSS modulok olyan módszert kínálnak, amellyel a stílusokat kisebb, újrafelhasználható egységekre oszthatjuk. Ez segít abban, hogy a projektek kódja átlátható és könnyen karbantartható legyen.

Miért használjunk modulokat?

A moduláris megközelítés lényege, hogy minden komponens saját, elszigetelt stílust kapjon. Így elkerülhetőek a stílusütközések és biztosítható, hogy a változtatások csak a megfelelő elemre vonatkozzanak.

Ez a példa bemutatja, hogyan lehet egy egyszerű kártya komponenst modulárisan stílusozni.

CSS Modules React-ben

A modern frontend környezetek, például a React és a Next.js, natív támogatást kínálnak a CSS Modules használatához. Ez lehetővé teszi a komponens-szintű stílusokat, ahol az osztálynevek automatikusan egyedivé válnak.

Ez a példa egy gomb komponens moduláris stílusát mutatja be, különböző variációkkal.

Tippek a CSS modulokhoz

Néhány tanács, ami segít a CSS modulok hatékony használatában.

• Mindig nevezd el konzisztensen az osztályokat, hogy könnyen felismerhetőek legyenek.
• Tartsd a modulokat kicsiben: egy modul egy komponenshez tartozzon.
• Használd a modulokat kombinálva architektúrával (pl. BEM + Modules), hogy átláthatóbb legyen a projekt.