# Globális osztályok

> Újrafelhasználható CSS-osztályok létrehozása, alkalmazása és kezelése a Bricks-ben.

A sablonstílusok az elemek alapértelmezéseit kezelik. A globális osztályok viszont igény szerint alkalmazható segédstílusok: szöveg középre igazítása, árnyék, gombváltozatok. Ez a fejezet kicsit mélyebb; ha sietsz, csak futtasd át, és térj vissza, amikor a projektjeid ismétlődővé válnak.

## Mi az a globális osztály?

A CSS-osztály stílusok gyűjteménye, amit bármely elemre alkalmazhatsz. Ahelyett, hogy minden elemet külön stílusoznál, egyszer létrehozod az osztályt, és ott használod, ahol kell. Példa: a `.shadow-large` osztály árnyékot ad. Ugyanazt az árnyékot rátehetsz gombokra, képekre, kártyákra anélkül, hogy újra meg kellene adnod.

A globális osztályok a Bricks-ben vizuálisan épülnek, és egy kattintással újrahasználhatók. Nélkülözhetetlenek a skálázható, karbantartható webhelyekhez: egységességet adnak, és gyorsítják a munkát.

## Miért számít?

Ha 20 gombod van az oldalon osztály nélkül, mindegyiket külön stílusozod, és minden változtatást 20-szor kell elvégezned. Osztállyal:

1. egyszer létrehozod a `.btn-primary` osztályt,
2. mind a 20 gombra alkalmazod,
3. ha változik a stílus, egyszer szerkeszted az osztályt,
4. mind a 20 gomb automatikusan frissül.

Példa: két címsornak ugyanolyan kék színe és vastag betűje legyen. Osztály nélkül mindkettőt külön stílusozod, és ha a kékből lila lesz, minden címsort meg kell keresni. Osztállyal létrehozod a `.heading-blue` osztályt (kék szín, 700-as vastagság), mindkettőre rátéve egy kattintással, és később az osztályt szerkeszted: minden használó elem azonnal frissül.

## Az első globális osztály

### Előkészítés

1. Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt.
2. Adj hozzá két **Címsor** elemet.

### Az osztály létrehozása

1. Jelöld ki az első címsort.
2. A bal oldali panel tetején látod az elem nevét és alatta az azonosító mezőt (például `#brxe-abc123`).
3. Kattints erre az azonosító mezőre.
4. A megjelenő beviteli mezőbe írd: `heading-feature`.
5. Nyomj `Enter`-t, vagy kattints a mentés (floppy) ikonra.

A mező most `.heading-feature` feliratot mutat (ponttal, ami azt jelzi, hogy osztály, nem azonosító). Mostantól minden stílus, amit erre a címsorra beállítasz, az osztályba kerül, nem csak erre az elemre.

### Az osztály stílusozása

A kijelölt, osztállyal ellátott címsornál:

1. A **Tipográfia** résznél a **Betűméret** legyen `32`.
2. A **Betűvastagság** legyen `700`.
3. A **Szín** legyen élénk kék (`#0066ff`).
4. A **Térköz** résznél a **Lenti margó** legyen `20`.

Ezek a stílusok a `.heading-feature` osztályban vannak tárolva.

### Az osztály alkalmazása másik elemre

1. Jelöld ki a második címsort.
2. Kattints a panel tetején lévő azonosító mezőre.
3. Kezdd el gépelni: `heading-feature`.
4. A legördülő automatikus kiegészítésben megjelenik az osztály.
5. Válaszd ki, vagy nyomj `Enter`-t.

A második címsor azonnal megegyezik az elsővel: ugyanaz a méret, vastagság, szín és térköz, semmit nem kellett újra megadnod.

Az osztály módosítása mindenhol átvezetődik: jelöld ki bármelyik címsort (mindkettő használja az osztályt), állítsd a színt lilára (`#9333ea`), és mindkét címsor azonnal frissül.

## Azonosító- és osztálystílusok különbsége

Alapból, ha kijelölsz egy elemet és stílust adsz neki, az az elem egyedi azonosítójához kerül, és csak az adott elemre hat. Ha globális osztályt hozol létre és alkalmazol, a stílusok az osztályba kerülnek, és minden azt használó elem örökli őket.

Fontos: az azonosító stílusai felülírják az osztály stílusait (CSS-specificitás). Ha egy elemre osztályt teszel, majd ugyanazon az elemen egyedi stílust is megadsz, az egyedi stílus nyer.

Jó gyakorlat: a közös stílusokhoz használj globális osztályt, az elemspecifikus (azonosítós) stílust pedig csak egyedi, egyszeri módosításokhoz.

## Segédosztály-rendszer építése

A segédosztályok kicsi, egycélú osztályok, amelyeket kombinálhatsz.

### Szövegigazítás

Hozd létre ezt a három osztályt:

**.text-center**

1. Hozz létre egy **Címsor** elemet.
2. Add hozzá a `text-center` osztályt.
3. A **Tipográfia** résznél a **Szöveg igazítása** legyen `Közép`.
4. Töröld a címsort (csak az osztály létrehozásához kellett).

**.text-left:** ugyanígy, a **Szöveg igazítása** legyen `Bal`.

**.text-right:** ugyanígy, a **Szöveg igazítása** legyen `Jobb`.

Így bármely szöveget középre igazíthatsz a `.text-center` osztállyal.

### Térközosztályok

Az egységes térközökhöz hozz létre lenti margó osztályokat:

- **.mb-sm:** a **Lenti margó** `16`.
- **.mb-md:** a **Lenti margó** `32`.
- **.mb-lg:** a **Lenti margó** `48`.

Ha szeretnéd, ugyanezt a felső margóhoz is megteheted (`.mt-sm`, `.mt-md`, `.mt-lg`). A margóértékek gépelése helyett csak az osztályt alkalmazod.

### Gombváltozatok

**.btn-outline**

1. Adj hozzá egy **Gomb** elemet.
2. Alkalmazd a `btn-outline` osztályt.
3. A **Stílus** résznél távolítsd el a háttérszínt (legyen átlátszó).
4. A **Szegély** résznél adj `2px` folytonos szegélyt `#0066ff` színnel.
5. A szövegszín legyen `#0066ff`.
6. A belső margó legyen `12` fent és lent, `24` balra és jobbra.
7. A **Szegélysugár** legyen `8`.

**.btn-ghost**

1. Hasonló az outline-hoz, de szegély nélkül.
2. Csak szövegszín és belső margó.
3. Finom lebegtetési hatás: a `:hover` állapotnál adj hátteret.

Az osztályok cseréjével azonnal váltogathatod a gombváltozatokat.

## A globális osztályok kezelése

### Az összes osztály megtekintése

Nyomd meg a `Cmd/Ctrl + .` billentyűket a Stíluskezelő megnyitásához (vagy kattints az eszköztár **Stílusok** ikonjára), és lépj az **Osztályok** lapra. Itt:

- láthatod az összes globális osztályt,
- szerkesztheted, átnevezheted vagy törölheted őket,
- kereshetsz konkrét osztályra,
- megnézheted, hol használod az osztályokat,
- exportálhatod és importálhatod őket.

### Osztály szerkesztése

1. Az **Osztályok** lapon keresd meg a szerkesztendő osztályt.
2. Kattints a szerkesztés (ceruza) ikonra.
3. Módosítsd a stílusokat a panelen.
4. Az osztályt használó összes elem azonnal frissül.

### Nem használt osztályok törlése

A kezelő megmutatja, mely osztályokat hol használod. Ha egy osztályt sehol nem használsz, nyugodtan törölheted, hogy a könyvtár tiszta maradjon.

## Valós példa: különböző elemek azonos stílusa

Egy céloldalon a hero, a funkciók és a vélemények címsorának is ugyanolyan kék árnyalatúnak és vastagságúnak kell lennie. Osztály nélkül mindhármat külön stílusozod. Osztállyal létrehozod a `.heading-accent` osztályt, és mindhárom címsorra ráteszed.

Később az ügyfél lilát kér a kék helyett. Osztály nélkül mindhárom címsort egyenként át kell írnod, és könnyű valamelyiket kihagyni. Osztállyal a `.heading-accent` színét egyszer módosítod, és mindhárom frissül, kb. 10 másodperc alatt. Ez a módszer több száz elemre és több tucat oldalra is skálázódik.

## Osztályok kombinálása

Egy elemre több osztályt is rakhatsz, így a stílusokat összeállíthatod. Például a `.heading-feature` és a `.text-center` együtt a feature címsor stílusát (szín, vastagság, méret) és a középre igazítást is adja. Ez a moduláris megközelítés a lehető legnagyobb rugalmasságot adja minimális ismétléssel.

## Álosztályok: lebegtetés és más állapotok

A globális osztályok támogatják az álszelektorokat: `:hover`, `:focus`, `:active` és mások. Lebegtetési hatás létrehozása:

1. Hozd létre a `.btn-primary` osztályt.
2. Stílusozd az alapállapotot (háttér: kék, szöveg: fehér).
3. Az **Állapot** legyen `:hover`.
4. Sötétítsd a háttérszínt.
5. Adj hozzá finom nagyítást (a haladó vezérlők **Átalakítás** részénél).

Mostantól minden `.btn-primary` osztályú gomb ugyanígy viselkedik, és csak egyszer kellett megadnod.

## A skálázást segítő haladó funkciók

- **Változók:** a Stíluskezelő **Változók** lapján CSS-változókat (színek, térközskálák, betűméretek) adhatsz meg, amelyekre az osztályokban hivatkozhatsz. A változó módosítása minden azt használó osztályt frissít.
- **Komponensek:** teljes elrendezéseket (nem csak stílusokat) alakíthatsz újrahasználható, szinkronizált blokkokká. Olyanok, mint a globális osztályok a szerkezetre, tartalomra és stílusra.

Ezek ugyanarra az elvre épülnek: egyszer meghatározod, mindenhol használod, globálisan frissíted. Előbb a globális osztályokat sajátítsd el, utána fedezd fel ezeket.

## Összefoglalás

Most már tudod, hogyan hozz létre és alkalmazz globális osztályokat, hogyan építs segédosztályokat szövegigazításhoz, térközhöz és gombstílusokhoz, hogyan kezeld őket a Stíluskezelőben, hogyan használj álszelektorokat, és mi a különbség az azonosító- és az osztályalapú stílus között.