Globális CSS-osztályok

A globális CSS-osztály újrafelhasználható stílus-célpont. Ahelyett, hogy egy elem azonosítóját stílusoznád, létrehozol egy osztályt, hozzárendeled egy vagy több elemhez, és ugyanazokkal a vezérlőkkel szerkeszted, mint az elemstílusokat. Ismétlődő döntésekre használd: gombok, kártyák, rácsok, térköz-burkolók, címsorok, jelvények, űrlapsorok, bármi, aminek egységesnek kell maradnia egy oldalon vagy az egész webhelyen.

Az osztályok egyszerűbb bevezetője az Első lépések fejezetben van. A teljes osztálykönyvtár kezelését az Osztálykezelő fejezet írja le.

A működés lényege

A Bricks minden elemének van elemazonosítója. Ha nincs globális osztály kiválasztva, a stílusvezérlők csak erre az azonosítóra érvényesek. Ha egy globális osztály az aktív szelektor, a vezérlők az osztályra írnak, és minden elem megkapja ezeket a stílusokat, amelyik használja az osztályt.

Az elempanel tetején lévő szelektormező az aktuális stílus-célpont:

• #my-element: csak ezt az elemet stílusozod.
• .card: a card nevű globális osztályt stílusozod.
• .card:hover, .card::before vagy más szelektor/pszeudoállapot: az osztály adott állapotát stílusozod.

Fontos a különbség a hozzárendelt és az aktív osztály között:

• Hozzárendelt osztály: az elem használja az osztályt a frontenden.
• Aktív osztály: a szerkesztő vezérlői jelenleg erre az osztályra írják a stílust.

Ha hozzáadod a .card osztályt egy elemhez, majd megszünteted a kijelölését, újra az elemazonosítót stílusozod. Ha kijelölöd a .card osztályt, a változtatásaid az osztályt módosítják.

Osztálystílus és elemazonosító-stílus

Az elemazonosító stílusai specifikusabbak, mint a globális osztályéi. Ha ugyanazt a CSS-tulajdonságot az elemazonosító és egy osztály is megadja, általában az elemazonosítóé nyer. Ezt használd tudatosan:

• A közös alapértékek az osztályra kerüljenek.
• Az egyedi felülírások az elemazonosítóra.
• Ha egy stílus újrafelhasználhatónak készül, ne hagyd ugyanazt a tulajdonságot az elemazonosítón is.

Globális osztály létrehozása

1. Jelölj ki egy elemet a vásznon kattintva vagy a Szerkezet panelen.
2. Kattints a bal oldali panelen az elem neve alatt látható szelektorbemenetre, ami az elem azonosítóját mutatja.
3. Írd be az osztály nevét az osztálymezőbe.
4. Nyomd meg az Enter billentyűt, vagy kattints a mentés ikonra.
5. Jelöld ki az osztályt, hogy ez legyen az aktív szelektor.
6. Állítsd be a stílusvezérlőket.

A Bricks elfogadja az osztályneveket kezdő ponttal és anélkül is. Pont nélkül tárolja, és .osztalynev formában jeleníti meg. Létrehozáskor több osztálynevet is megadhatsz szóközzel vagy vesszővel elválasztva: a Bricks létrehozza a hiányzókat, a már meglévő nevűeket pedig újrahasznosítja.

Meglévő osztály hozzárendelése egy elemhez

1. Jelöld ki az elemet.
2. Nyisd meg az elempanel tetején a szelektor/osztály legördülőt.
3. Keress rá az osztály nevére.
4. Kattints az osztályra, hogy hozzáadd az elemhez.

Az osztály ezután megjelenik az elem aktív osztályai között. Egy osztály chipjére kattintva aktívvá teheted szerkesztésre, a chipen lévő bezárás ikonnal pedig eltávolíthatod az elemről. Az eltávolítás nem törli a globális osztályt, csak a kijelölt elemről veszi le.

Osztály kijelölésének megszüntetése az elem saját stílusozása előtt

Ha egy globális osztály aktív, a vezérlők az osztályt szerkesztik. Az elemazonosítóhoz való visszatéréshez:

1. Kattints az aktív szelektormezőre.
2. Válaszd az elemazonosító bejegyzést, vagy kattints a törlés ikonra.
3. Ellenőrizd, hogy a szelektormező az osztály neve helyett az elemazonosítót mutatja.

Így kerülheted el a legbiztosabban, hogy véletlenül az összes, az osztályt használó elemet módosítsd.

Több osztály egy elemen

Egy elemnek több globális osztálya is lehet, így szétválaszthatod a feladatokat:

.button.button--primary.margin-top-l

Gyakori minta:

• egy alaposztály a szerkezetnek és az alapstílusnak,
• egy módosító osztály egy változathoz,
• egy segédosztály egyetlen tulajdonsághoz, például térközhöz vagy színhez.

Ha két osztály hasonló specificitással ugyanazt a tulajdonságot állítja, a CSS szokásos kaszkádszabályai döntenek. Ne az ütköző osztálydefiníciókra építsd a munkafolyamatod, tartsd az osztályokat egy-egy feladatra szűkítve.

Ha a Bricks → Beállítások oldalon be van kapcsolva a Globális osztályok CSS-ének kimenete az Osztálykezelő sorrendjében beállítás, az azonos specificitású osztályszabályok az Osztálykezelő szerinti sorrendben érvényesülnek. Kikapcsolva a Bricks a korábbi sorrendet használja, vagyis ahogy az osztályok a megjelenített elemeken előfordulnak.

Pszeudoosztályok és egyedi szelektorok

A globális osztályoknak lehetnek pszeudoosztály- és egyéni szelektorstílusai.

Pszeudoosztályt állapotokhoz használj:

:hover
:focus
:active

Egyéni szelektort akkor használj, ha az osztály környezetéből egy gyermek vagy kapcsolódó elemet kell stílusozni, például egy kártyaosztályon belüli ikont vagy egy újrahasznosítható burkolón belüli címsort.

Ha a szelektor : jellel kezdődik, a Bricks közvetlenül az osztályszelektorhoz fűzi. Minden más szelektort beágyazott szelektorként kezel.

Osztálystílusok másolása, beillesztése, visszaállítása és átnevezése

Az osztályszelektor műveleteivel a CSS kézi másolása nélkül dolgozhatsz a stílusokkal:

• stílusok másolása elemazonosítóról vagy osztályról,
• stílusok beillesztése elemazonosítóra vagy osztályba,
• elemazonosító stílusainak visszaállítása,
• osztály stílusainak visszaállítása,
• az elem CSS-azonosítójának vagy az aktív osztálynak az átnevezése.

Osztály átnevezésekor a Bricks az osztály nevén túl az osztályon belül tárolt egyedi CSS-t is frissíti, ahol a régi osztálygyökér-szelektor szerepel. Az átnevezés nem érinti azt a CSS-t, amelyet a Bricks által kezelt osztálybeállításokon kívül írtál.

Zárolt osztályok

A zárolt osztály nem szerkeszthető, amíg fel nem oldod a zárolást. Ez védi a közös designrendszer-osztályokat a véletlen változtatástól, miközben hozzárendelni továbbra is lehet őket, ha a jogosultságok engedik. Ha egy osztályt nem tudsz szerkeszteni, nézd meg, hogy a felhasználói szerepkörödnek van-e jogosultsága az osztályok zárolására, feloldására és szerkesztésére.

Tömeges szerkesztés

Ha több elem van kijelölve, a globális osztályok panel azokat az osztályokat mutatja, amelyek minden kijelölt elemen megvannak. Osztályt hozzáadhatsz vagy eltávolíthatsz az összes kijelölt elemről egyszerre. Ez hasznos közös segéd- vagy elrendezési osztály több elemre való rárakásához, részletes elemenkénti rendezésre viszont nem alkalmas.

Jogosultságok és letiltott felület

A rendszergazdák szabályozhatják a globális osztályok funkcióihoz való hozzáférést. A jogosultságaidtól függően lehetséges, hogy:

• globális osztályokat hozhatsz létre,
• szerkeszthetsz,
• hozzárendelhetsz vagy leválaszthatsz,
• törölhetsz,
• zárolhatsz vagy feloldhatsz,
• osztálystílusokat másolhatsz és illeszthetsz be.

A rendszergazda a globális osztálykezelőt a Bricks → Beállítások → Általános → A globális osztálykezelő letiltása beállítással kapcsolhatja ki. Ekkor az Osztálykezelő lap eltűnik, az elempanel osztályműveleteit viszont továbbra is a fenti jogosultságok szabályozzák.

Az elempanel és az Osztálykezelő viszonya

Az elempanelen osztályt alkalmazol, és az aktív osztályt szerkeszted, miközben egy elemen dolgozol. Az Osztálykezelő az osztálykönyvtár karbantartására való: egy kiválasztott osztály egyedi CSS-e, kategóriák, tömeges átnevezés, zárak, kuka, import és export, használati szűrők és ütközések átnézése. Mindkét módon létrehozhatsz és használhatsz osztályokat, de más a feladatuk:

• Elempanel: „Használd vagy szerkeszd ezt az osztályt ezen az elemen.”
• Osztálykezelő: „Tartsd karban az egész osztályrendszert.”

Segédosztályok

A Stíluskezelő egyes funkciói színekből vagy változóskálákból segédosztályokat tudnak generálni. Ezek is globális osztályként tárolódnak, ezért megjelennek az osztálylistában, és ugyanúgy hozzárendelhetők, mint a többi. A generált segédosztályokat a legjobb kicsi, egycélú osztályként használni, és nem érdemes nagy komponensosztállyá alakítani, kivéve, ha szándékosan teszed.

Hibaelhárítás

Az osztály hozzá van rendelve, de a stílus nem látszik

Ellenőrizd sorban:

1. Az osztály volt-e kijelölve aktív szelektorként, amikor szerkesztetted?
2. Az elemazonosító nem állítja-e már be ugyanazt a tulajdonságot?
3. Az osztály nincs-e zárolva?
4. Az osztálynak van-e stílusa az aktuális elemtípushoz?
5. Nem írja-e felül az osztály kimenetét magasabb specificitású egyedi CSS?

Átírtam egy osztályt, és sok elem megváltozott

Ez a várt viselkedés, hiszen a globális osztály újrahasznosítható. Ha csak egy elemnek kell változnia, szüntesd meg az aktív osztályt, és stílusozd az elemazonosítót, vagy hozz létre egy specifikusabb módosító osztályt.

Nem tudok osztályt létrehozni vagy szerkeszteni

Nézd meg a szerkesztői jogosultságaidat, és hogy a Globális osztálykezelő nincs-e kikapcsolva a Bricks beállításaiban.

Egy importált sablon osztálya ütközik egy meglévővel

A Bricks az osztályokat azonosító és név alapján követi. Ha egy importált osztálynak ugyanaz az azonosítója vagy neve, mint egy helyinek, az importbeállítástól függően a meglévő osztályra képezi le, vagy ütközésként megmutatja áttekintésre. Éles webhelyen az importot elfogadás előtt nézd át, különösen, ha az osztályok designrendszer részei. Részletek az Osztályok importkezelője fejezetben.