Kaszkádréteg

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.

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:

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

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

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:

: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:

@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:

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.