# Kaszkádréteg

> Hogyan teszi a Bricks CSS kaszkádrétegekkel könnyen felülírhatóvá az alapértelmezett stílusait, és mi a bricks.reset réteg szerepe.

A Bricks alapértelmezett stílusainak specificitása mindig egyensúlyozás volt. A cél, hogy ezek a stílusok a lehető legkevésbé legyenek tolakodók, és üres vásznat adjanak az építéshez, de ezt kizárólag a szelektorok specificitásával nehéz elérni. Előfordult, hogy egyes szelektorokat még szándékosan sem lehetett könnyen felülírni.

A megoldás a CSS kaszkádrétegek használata, amelyek széles körben támogatottak a böngészőkben. A funkció alapból be van kapcsolva. Kikapcsolhatod a **Bricks → Beállítások → Teljesítmény → Kaszkádréteg** beállításnál, de ez nem ajánlott.

![A Bricks beállításai, Teljesítmény lap, ahol a Kaszkádréteg beállítás található](./kepek/elso-lepesek-2-beallitasok-teljesitmeny.webp)

*A Bricks beállításai, Teljesítmény lap, ahol a Kaszkádréteg beállítás található* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

## A működés

A funkció egy Bricks-rétegkészletet vezet be:

- `bricks.reset` (alacsonyabb prioritású réteg): ez az alréteg üres, és biztonsági hálót ad haladó felhasználóknak. A Bricks maga nem alkalmaz stílust ebben a rétegben.
- `bricks`: a Bricks alapértelmezett stílusait és elem-CSS-ét tartalmazza, így réteg nélküli stílusokkal vagy magasabb prioritású, saját rétegekkel könnyebben felülírhatók.
- További Bricks-rétegek: egyes frontend erőforrások specifikusabb rétegeket használnak, például `bricks.gutenberg`, `bricks.icons` vagy `bricks.libs`, hogy a kapcsolódó reset-, szerkesztő-, ikon- vagy könyvtárstílusok megtarthassák a kívánt sorrendjüket.

### A probléma: szelektorspecificitás

Az alapértelmezett Bricks-stílusokban gyakori minta például:

```css
[class*="brxe-"] {
  max-width: 100%;
}
```

Ha ezt egy általános elemszelektorral próbálnád felülírni:

```css
div {
  max-width: 400px;
}
```

a felülírás nem működne, mert az attribútumszelektor (`[class*="brxe-"]`) specificitása magasabb, mint a `div`-é.

Egy lehetséges kerülőút, hogy a Bricks attribútumszelektorait `:where()` függvénybe csomagolják, ami csökkenti a specificitást:

```css
:where([class*="brxe-"]) {
  max-width: 100%;
}
```

Ehhez azonban minden szelektort be kellene csomagolni, ami nemcsak bonyolult, hanem nagy léptékben kivitelezhetetlen is.

### A megoldás: kaszkádrétegek

Kaszkádrétegekkel az alapértelmezett stílusokat egy `bricks` nevű rétegben definiálhatjuk. A rétegen kívüli (réteg nélküli) vagy magasabb prioritású rétegbeli stílusok automatikusan megelőzik az alapértelmezett Bricks-stílusokat.

A rétegek szerkezete:

```css
@layer bricks.reset;
@layer bricks {
  [class*="brxe-"] {
    max-width: 100%;
  }
  /* További alapértelmezett Bricks-stílusok */
}
```

Ha most a `bricks` rétegen kívül adod meg a saját stílusodat:

```css
div {
  max-width: 400px;
}
```

akkor az megelőzi az alapértelmezett Bricks-stílusokat, mert a réteg nélküli és a magasabb prioritású rétegek stílusai a szelektortól függetlenül elsőbbséget élveznek.

### A `bricks.reset` szerepe

A `bricks.reset` alréteg rugalmasságot ad az alapértelmezett Bricks-stílusok felülírásához.

Normál esetben a `bricks` rétegbeli stílusok könnyen felülírhatók, de ha egy alapértelmezett stílus `!important` jelölést használ, a kaszkád sorrendje megfordul, és nehezebb felülírni réteg nélküli vagy magasabb prioritású rétegbeli stílusokkal. A `bricks.reset` réteg alacsonyabb prioritása tartalék megoldást ad arra, hogy ilyen ritka esetekben is biztonságosan megadhass egyéni stílusokat. Bár a Bricks igyekszik elkerülni az `!important` használatát az alapértelmezett stílusaiban, kivéve, ha feltétlenül szükséges, ez az alréteg biztonsági háló.

## Miért számít

Azzal, hogy az alapértelmezett Bricks-stílusok egy külön kaszkádrétegben vannak, a következőket éred el:

1. **Könnyebb felülírás:** a réteg nélküli vagy magasabb prioritású rétegbeli stílusok a szelektorspecificitással való küzdelem nélkül felülírhatják az alapértelmezett Bricks-stílusokat.
2. **Egyszerűbb karbantartás:** nem kell kézzel hangolni minden szelektor specificitását, a kaszkádrétegek tiszta, skálázható megoldást adnak.