Konvence pojmenování CSS tříd v Drupalu: Pomlčky, podtržítka a modifikátory

Základem pro tyto konvence v Drupalu je metodologie BEM (Block, Element, Modifier), která poskytuje strukturovaný způsob organizace CSS. Tento text detailně popisuje aplikaci této metodologie v kontextu Drupalu, včetně specifik syntaxe a příkladů. Zvláštní pozornost je věnována aktuálním platným standardům a také výhledu na případné změny.

CSS standardy v Drupalu

Význam standardů

Komunita Drupalu definuje sadu standardů kódování a osvědčených postupů, které by měly být dodržovány při psaní kódu pro jádro i přispívané moduly a témata. Tyto standardy pokrývají formátování kódu, architekturu CSS a konvence pojmenování. Jejich hlavním cílem je zajistit konzistenci, která usnadňuje vývojářům orientaci v různých částech kódu a podporuje efektivní spolupráci v týmech. Důležitým aspektem je, že tyto standardy jsou považovány za "vždy aktuální" a nezávislé na konkrétní verzi Drupalu, veškerý nový kód by měl dodržovat platné standardy i když aktualizace staršího kódu nemusí být vždy proveditelná kvůli rozsahu. Jasnost a čitelnost kódu jsou hlavními principy.

Základní principy CSS architektury

CSS standardy v Drupalu vycházejí z osvědčených architektonických principů, jako jsou SMACSS (Scalable and Modular Architecture for CSS) a OOCSS (Object Oriented CSS). 

Klíčové zásady zahrnují:

• Nezávislost na HTML struktuře: styly by měly definovat vzhled prvku bez ohledu na jeho umístění v DOM struktuře. Vzhled by měl být přiřazován pomocí tříd.
• Používání tříd: pro aplikaci stylů se primárně používají CSS třídy. Použití ID selektorů (#id) pro stylování se důrazně nedoporučuje.
• Krátké selektory: preferovány jsou krátké selektory, ideálně tvořené jednou třídou. Je třeba se vyhnout zbytečně dlouhým a složitým selektorům a hlubokému zanořování (např. .a.b.c.d).
• Omezení zanoření: je doporučeno vyhnout se více než dvěma kombinátorům v selektoru (např. .my-list > li > a je na hranici) a opatrně používat selektor potomka, který může neúmyslně ovlivnit zanořené prvky. Preferován je selektor přímého potomka (>).

Integrace PostCSS

V novějších verzích Drupalu (zejména od Drupalu 9 a 10) došlo k integraci nástrojů jako PostCSS. PostCSS umožňuje vývojářům používat moderní syntaxi CSS, která ještě nemusí být plně podporována všemi prohlížeči. Mezi tyto moderní funkce patří například CSS proměnné, zanořování selektorů nesting nebo logické vlastnosti (logical properties), které usnadňují práci s RTL (right-to-left) jazyky. PostCSS tyto moderní zápisy převádí do standardního CSS, kterému rozumí i starší podporované prohlížeče.

Je důležité zdůraznit, že zavedení PostCSS primárně mění způsob psaní CSS, nikoli fundamentální principy pojmenování tříd. I když moderní syntaxe, jako je zanořování, může zjednodušit zápis komplexních selektorů v souborech .pcss.css, výsledný kompilovaný CSS kód stále sestává ze standardních selektorů tříd. Právě zde zůstává robustní a konzistentní konvence pojmenování, jako je BEM, naprosto klíčová pro pochopení vztahů mezi těmito selektory a pro udržení přehlednosti a spravovatelnosti kódu. Oznámení o aktualizaci standardů pro Drupal 10 a PostCSS zdůrazňuje usnadnění používání moderních postupů a funkcí, nikoli revizi základní filozofie pojmenování odvozené z BEM. BEM-like struktura tak poskytuje stabilní základ i při vývoji nástrojů pro psaní CSS.

Organizace souborů

Drupal často využívá pro organizaci CSS souborů přístup inspirovaný SMACSS, který kategorizuje pravidla do skupin jako: 

• Base (základní styly elementů),
• Layout (rozvržení stránky),
• Component (opakovaně použitelné UI prvky),
• State (stavy komponent) a
• Theme (vizuální vzhled). 

Tato struktura přirozeně doplňuje metodologii BEM, kde každý blok (komponenta) může mít své vlastní styly, často umístěné ve specifických souborech nebo adresářích. Například základní téma Olivero má CSS soubory rozdělené podle účelu (např. layout.css, colors.css) a komponenty.

BEM-like konvence pojmenování v Drupalu

Drupal přijal konvenci pojmenování CSS tříd, která je silně inspirována metodologií BEM (Block, Element, Modifier). Tento přístup pomáhá vytvářet přehledný, modulární a snadno udržovatelný CSS kód.

Přehled BEM

Metodologie BEM rozděluje uživatelské rozhraní na tři základní typy entit:

• Block (Blok): samostatná, znovupoužitelná komponenta uživatelského rozhraní, která má smysl sama o sobě. Příklady: .menu, .button, .card, .search-form. Bloky mohou být zanořené, ale sémanticky zůstávají na stejné úrovni.
• Element (Element): část bloku, která nemá samostatný význam a je sémanticky vázána na svůj nadřazený blok. Příklady: .menu__item, .card__title, .search-form__input.
• Modifier (Modifikátor): příznak (flag) na bloku nebo elementu, který reprezentuje jeho variantu, stav nebo vzhled. Příklady: .button--primary, .menu__item--active, .card--highlighted, .search-form--compact.

Specifická syntaxe v Drupalu

Drupal standardy definují konkrétní použití oddělovačů pro implementaci BEM:

Jednoduchá pomlčka (-) - oddělovač slov:

• Pravidlo: používá se k oddělení slov v názvech Bloků, Elementů nebo Modifikátorů pro zlepšení čitelnosti.
• Příklady: .node-preview, .button-group, .primary-navigation, .field-label, .error-message, .form-item.
• Odůvodnění: zlepšuje čitelnost oproti spojování slov (.buttongroup) nebo používání camelCase (.buttonGroup). Je to běžná praxe v CSS.

Dvojité podtržítko (__) - oddělovač Elementu:

• Pravidlo: spojuje Element s jeho nadřazeným Blokem. Formát je .nazev-bloku__nazev-elementu.
• Příklady: .menu__item, .menu__link, .card__header, .card__body, .form-item__label, .progress__bar.
• Odůvodnění: jasně signalizuje závislost elementu na bloku, což pomáhá předcházet příliš obecným názvům tříd (jako .title nebo .content) a snižuje závislost na konkrétní struktuře DOM. Pomáhá také omezit potřebu hlubokého zanořování selektorů.
• Důležitá poznámka: není nutné v názvu třídy přesně kopírovat strukturu DOM. Například místo .menu__item__link může být dostačující .menu__link, pokud je tato třída dostatečně specifická a srozumitelná.

Dvojitá pomlčka (--) - Oddělovač Modifikátoru:

• Pravidlo: označuje modifikátor (variantu nebo stav) bloku nebo elementu. Formát je .nazev-bloku--nazev-modifikatoru nebo .nazev-bloku__nazev-elementu--nazev-modifikatoru.
• Příklady: .button--primary, .button--small, .menu__item--active, .message--error, .field--required, .tabs__tab.is-active (Drupal někdy používá i stavové třídy jako .is-active, které fungují podobně jako modifikátory).
• Odůvodnění: umožňuje stylovat různé varianty komponent bez duplikace základních stylů. Třída modifikátoru by měla obsahovat pouze styly, které se liší od základního bloku nebo elementu. V HTML se obvykle používá základní třída společně s třídou modifikátoru (např. <button class="button button--primary">).

Shrnutí konvence pojmenování v Drupalu

Následující tabulka shrnuje pravidla pro používání oddělovačů v CSS třídách podle Drupal standardů:

Výhody této konvence v Drupalu

Přijetí BEM-like konvence přináší několik významných výhod pro vývoj v Drupalu:

• Čitelnost a komunikace: názvy tříd se stávají samovysvětlujícími, jasně popisují strukturu a vztahy mezi prvky UI. To usnadňuje pochopení kódu a komunikaci v týmu.
• Znovupoužitelnost: komponenty (Bloky) jsou navrženy jako nezávislé a snadno znovupoužitelné v různých částech aplikace.
• Udržovatelnost: snižuje riziko CSS konfliktů a neočekávaných vedlejších efektů při úpravách stylů. Usnadňuje modifikaci a rozšiřování komponent. Udržuje nízkou specificitu selektorů, což zjednodušuje přepisování stylů.
• Škálovatelnost: poskytuje jasnou a předvídatelnou strukturu, která je vhodná i pro rozsáhlé a komplexní projekty.

Vztah k JavaScriptovým hookům

Je důležité rozlišovat mezi CSS třídami používanými pro stylování a třídami, které slouží jako "háčky" (hooks) pro JavaScript. Standardy doporučují pro JavaScriptové hooky používat prefix js- (např. .js-toggle-button). Tyto js- třídy by se nikdy neměly používat pro aplikaci CSS stylů. Toto oddělení zajišťuje, že změny v CSS neovlivní funkčnost JavaScriptu a naopak. Pokud JavaScript mění stav komponenty, měl by ideálně přidat nebo odebrat stavovou třídu (např. BEM modifikátor jako .block--active nebo obecnější třídu jako .is-active), a vizuální změnu by pak mělo zajistit CSS pravidlo cílící na tuto stavovou třídu.

Příklady témat z jádra Drupalu (Olivero a Claro)

Obecný princip

Témata dodávaná s jádrem Drupalu (core themes) slouží jako referenční implementace standardů a osvědčených postupů komunity. Analýza jejich CSS může poskytnout praktický vhled do aplikace BEM-like konvence.

Téma Olivero

Olivero je výchozí frontendové téma Drupalu od verze 9.4.20 Bylo navrženo s důrazem na moderní vzhled, vysokou úroveň přístupnosti (WCAG AA) a podporu nejnovějších funkcí Drupalu, jako je Layout Builder. Olivero využívá PostCSS pro kompilaci CSS, což umožňuje použití moderní syntaxe.

Ačkoliv dokumentace nemusí explicitně uvádět všechny použité BEM třídy, kódová báze Olivero obecně následuje principy BEM. Příklady tříd, které lze v Olivero nalézt nebo odvodit:

• Bloky: .header, .footer, .nav-primary, .button.
• Elementy: .header__site-branding, .nav-primary__item, .tabs__tab.
• Modifikátory: .button--primary, .view-teaser--four.
• Stavové třídy (podobné modifikátorům): .is-active (např. .tabs__tab.is-active).
• Třídy s pomlčkou pro oddělení slov: .direct-child.

V praxi core témata jako Olivero ukazují pragmatický přístup. Zatímco důsledně používají BEM pro strukturu komponent a jejich varianty (např. .view-teaser--four), pro dynamické stavy často řízené JavaScriptem mohou používat obecnější stavové třídy jako .is-active. Nejedná se o rozpor, ale o použití vhodného nástroje pro daný účel – BEM pro statické varianty komponent, stavové třídy pro dynamické stavy. Základní princip jasně definovaných, zapouzdřených tříd zůstává zachován.

Téma Claro

Claro je výchozí administrační téma Drupalu od verze 9.4.19 Je založeno na dedikovaném Drupal Design System a klade důraz na čistotu, přístupnost, konzistenci a komponentový přístup. Stejně jako Olivero, i Claro využívá PostCSS.

CSS standardy pro Claro explicitně ukazují použití pomlček a dvojitých pomlček v konvencích pro pojmenování CSS proměnných, což přímo odráží BEM konvenci pro modifikátory tříd:

• --button-bg-color (pomlčky pro oddělení slov),
• --button--focus-bg-color (dvojitá pomlčka pro označení stavu focus),
• --button-primary--focus-bg-color (pomlčka pro variantu primary, dvojitá pomlčka pro stav focus),
• --button--focus-bg-color--dark (dvojité pomlčky pro stav focus i modifikátor dark).

Toto použití dvojitých pomlček (--) v názvech CSS proměnných pro označení stavů nebo variant silně podporuje a upevňuje stejnou konvenci používanou pro modifikátory CSS tříd v BEM. Standardy Claro definují vzory jako ([element])(-[property])(? --[state])(-[typ-proměnné])(? --[modifikátor]). To ukazuje vědomé rozhodnutí zrcadlit syntaxi BEM modifikátorů (--) v názvech proměnných pro dosažení konzistence. Naznačuje to, že vývojový tým jádra Drupalu vnímá tento vzor (-- pro stav/variantu) jako fundamentální součást své CSS architektury a aplikuje jej konzistentně napříč různými aspekty stylů, což usnadňuje pochopení vývojářům.

Ačkoliv konkrétní třídy nejsou v přehledových dokumentech vždy vyjmenovány, snahy o refaktorizaci CSS v Claro jasně ukazují strukturu založenou na komponentách (tlačítka, karty, fieldsety atd.), které přirozeně využívají BEM názvy jako .button, .button--primary, .card, .card__header, .fieldset__label.

Konvence Drupalu 11

Konzistence standardů

Jak již bylo zmíněno, Drupal coding standards jsou obecně považovány za "vždy aktuální" a nejsou striktně vázány na konkrétní major verzi Drupalu. Nový kód by měl vždy dodržovat aktuálně platné standardy.

Neočekávají se žádné zásadní změny

Na základě dostupné dokumentace a nedávných aktualizací standardů (jako byla integrace PostCSS pro Drupal 10) nic nenasvědčuje tomu, že by se základní BEM-like konvence pojmenování (použití pomlček, dvojitých podtržítek a dvojitých pomlček) měla pro Drupal 11 měnit. Zásadní změny standardů kódování jsou obvykle diskutovány a oznamovány s předstihem v rámci projektu Coding Standards.

Důraz na moderní postupy a komponenty

Drupal 11 pokračuje v rozvíjení moderních postupů zavedených v Drupalu 9 a 10, včetně využívání PostCSS a potenciálně novějších nativních CSS funkcí. Základní BEM-like struktura pojmenování však poskytuje stabilní a osvědčený základ pro tyto moderní technologie.

Navíc, BEM-like konvence pojmenování poskytuje stabilní a kompatibilní základ pro novější iniciativy v Drupalu, jako jsou Single Directory Components (SDC), které se stávají součástí jádra. SDC podporují zapouzdření šablony komponenty (Twig), jejích stylů (CSS) a chování (JS) do jednoho adresáře. BEM se svým inherentním zaměřením na komponentově orientované CSS je pro SDC přirozeným partnerem. Jasná struktura pojmenování BEM (blok__element--modifikator) pomáhá definovat rozsah a varianty stylů v rámci SDC komponenty. Jak se Drupal posouvá směrem k více komponentizovaným architekturám, BEM konvence se stává ještě relevantnější, což naznačuje její stabilitu a pokračující význam i pro Drupal 11 a další verze.

Osvědčené postupy a jak se vyhnout problémům

Pro efektivní využití BEM-like konvence a psaní kvalitního CSS v Drupalu je doporučeno dodržovat následující postupy:

• Používejte celá slova: vyhněte se zkratkám v názvech tříd (např. použijte .button místo .btn).
• Sémantické názvy tříd: názvy tříd by měly odrážet účel komponenty nebo designový prvek, nikoli jeho obsah nebo čistě vizuální vlastnost (např. .error-message místo .red-text). Prezentační třídy (např. .grid-3, .text-center) jsou přijatelné, pokud reprezentují vizuální sémantiku smysluplnou pro vývojáře.
• Udržujte selektory krátké a specificitu nízkou: cílem by měly být selektory tvořené jednou třídou. Vyhněte se hlubokému zanořování a příliš komplexním selektorům. Opatrně používejte selektor přímého potomka (>) místo obecného selektoru potomka.
• Nepoužívejte ID pro stylování: nikdy nepoužívejte ID selektory (#my-id) pro stylování komponent.
• Opatrně s !important: používejte !important střídmě, primárně v tématech pro přepisování stavů (např. chybový, neaktivní). Jádro a přispívané moduly by se mu měly vyhýbat, aby bylo zajištěno, že jejich styly lze snadno přepsat.
• Konzistence je klíčová: důsledně dodržujte zvolenou konvenci v celém projektu.

Závěr

Konvence pojmenování CSS tříd v Drupalu je založena na principech metodologie BEM (Block, Element, Modifier) a využívá specifickou syntaxi oddělovačů:

• Jednoduchá pomlčka (-) se používá k oddělení slov v názvech bloků, elementů a modifikátorů.
• Dvojité podtržítko (__) se používá k oddělení elementu od jeho nadřazeného bloku (.blok__element).
• Dvojitá pomlčka (--) se používá k označení modifikátoru (varianty nebo stavu) bloku nebo elementu (.blok--modifikator, .blok__element--modifikator).

Tento strukturovaný přístup přináší významné výhody, včetně zlepšené čitelnosti kódu, snadnější údržby, vyšší znovupoužitelnosti komponent a lepší škálovatelnosti projektů. Pomáhá předcházet konfliktům stylů a usnadňuje spolupráci v týmu.

Standardy kódování v Drupalu jsou navrženy jako stabilní a verzně nezávislé. Ačkoliv se nástroje a postupy vyvíjejí (např. integrace PostCSS, nástup SDC), základní BEM-like konvence pojmenování zůstává platná a relevantní i pro nadcházející verzi Drupal 11. Poskytuje pevný základ pro moderní frontendový vývoj v rámci ekosystému Drupal.

Důsledné dodržování těchto standardů je doporučeno všem vývojářům pracujícím s Drupalem, neboť přispívá k vyšší kvalitě kódu, efektivnějšímu vývoji a lepší dlouhodobé udržitelnosti webových aplikací.