Jak používat proměnné v CSS a zefektivnit svůj styl

autor:
Tweet
Share
Share
Pin

Většina webových stránek využívá kaskádové styly (CSS) k vylepšení vzhledu a úpravě vizuálního stylu různých prvků. CSS sice není programovacím jazykem v pravém smyslu slova, nicméně se dá efektivně kombinovat s programovacími jazyky, jako je JavaScript, a vytvářet tak interaktivní a responzivní webové rozhraní.

Pokud máte zkušenosti s programovacími jazyky typu JavaScript, tak víte, že je možné deklarovat proměnné, přiřadit jim hodnotu a opakovaně je používat v různých částech kódu. Stejný princip lze aplikovat i v rámci CSS.

Tento článek si klade za cíl definovat CSS proměnné, vysvětlit jejich výhody a prakticky ukázat, jak takovou proměnnou v CSS deklarovat a používat.

Co jsou to CSS proměnné?

CSS proměnné, někdy též nazývané vlastní vlastnosti, představují mechanismus, který umožňuje webovým vývojářům ukládat hodnoty a opakovaně je používat v rámci celého stylu. To znamená, že můžeme definovat například styl písma, barvu pozadí nebo velikost písma, a následně tyto definice aplikovat na různé elementy, jako jsou nadpisy, odstavce nebo div kontejnery.

Proč vlastně CSS proměnné používat? Zde je několik důvodů:

  • Jednodušší aktualizace kódu: Po deklaraci proměnné ji lze použít v rámci celé šablony stylů. Jakákoliv úprava proměnné se tak automaticky projeví na všech místech jejího použití.
  • Redukce opakování kódu: S rostoucí velikostí projektu se často objevují podobné třídy a elementy. Místo opakovaného psaní stejného CSS kódu lze využít CSS proměnné.
  • Snazší údržba: Udržování kódu v dobrém stavu je klíčové pro efektivní fungování webové aplikace. Proměnné usnadňují orientaci v kódu a jeho aktualizaci.
  • Zlepšení čitelnosti kódu: V dnešní době je spolupráce v týmu klíčová. Použití proměnných v CSS přispívá ke kompaktnější a čitelnější struktuře kódu.
  • Konzistence stylu: CSS proměnné pomáhají udržet konzistentní vizuální styl v celé aplikaci. Lze například deklarovat rozestupy, okraje, styly písma a barvy, které se pak jednotně aplikují na všechna tlačítka na webu.

Jak se deklarují proměnné v CSS?

Po pochopení toho, co jsou CSS proměnné a proč je výhodné je používat, můžeme přistoupit k praktické ukázce jejich deklarace.

Pro deklaraci proměnné v CSS je nutné začít s názvem elementu, následovaným dvěma pomlčkami (–), požadovaným názvem proměnné a její hodnotou. Základní syntaxe vypadá takto:

element {
  --nazev-promenne: hodnota;
  }

Například, pokud chceme definovat výplň pro celý dokument, můžeme to provést následujícím způsobem:

body {
    --padding: 1rem;
  }

Rozsah platnosti CSS proměnných

CSS proměnné mohou mít buď lokální rozsah (dostupné pouze v rámci konkrétního elementu), nebo globální rozsah (dostupné v celé šabloně stylů).

Lokální proměnné

Lokální proměnné se definují v rámci konkrétního selektoru. Můžeme je například přidat k tlačítku. Zde je příklad:

.button {
      --button-bg-color: #33ff4e;
  }

V tomto případě je proměnná `barva-pozadi` dostupná pouze pro dané tlačítko a jeho potomky.

Globální proměnné

Globální proměnné jsou dostupné pro všechny elementy v kódu. K jejich deklaraci používáme pseudo-třídu `:root`. Zde je příklad deklarace globálních proměnných:

:root {
      --primary-color: grey;
      --secondary-color: orange;
      --font-weight: 700;
  }

V tomto kódu lze použít jakoukoliv z deklarovaných proměnných v rámci libovolného elementu, ať už se jedná o nadpis, odstavec, div kontejner nebo dokonce celé tělo.

Jak se CSS proměnné používají?

Pro ilustraci vytvoříme jednoduchý projekt, který bude obsahovat soubory `index.html` a `styles.css`.

V souboru `index.html` vytvoříme jednoduchý `div` element se dvěma nadpisy (`h1` a `h2`) a jedním odstavcem (`p`):

<div>
      <h1>Ahoj, vývojáři front-endu!!!</h1>
      <h2>Ukázka použití proměnných v CSS.</h2>
      <p>Pokračujte ve čtení</p>
  </div>

V souboru `style.css` definujeme následující styly:

:root {
      --primary-color: grey;
      --secondary-color: orange;
      --font-weight: 700;
      --font-size: 16px;
      --font-style: italic;
  }
  body {
      background-color: var(--primary-color);
      font-size: var(--font-size);
  }
  h1 {
      color: var(--secondary-color);
      font-style: var(--font-style)
  }
  h2 {
      font-weight: var(--font-weight)
  }
  p {
      font-size: calc(var(--font-size) * 1.2);
  }

Po vykreslení webové stránky získáme následující:

V uvedeném kódu jsme deklarovali globální proměnné v rámci elementu `:root`. Pro použití globální proměnné v jakémkoli elementu musíme použít klíčové slovo `var`. Například, pro nastavení barvy pozadí pomocí proměnné deklarované jako globální, použijeme tento kód:

`background-color: var(–primary-color);`

Pokud si prohlédnete ostatní elementy, uvidíte podobný způsob použití klíčového slova `var`.

Použití CSS proměnných s JavaScriptem

Pro ilustraci využití CSS proměnných s JavaScriptem použijeme lokální i globální proměnné.

Přidáme do existujícího kódu element pro zobrazení upozornění:

Klikni na mě!

Náš upravený `index.html` soubor bude vypadat takto:

<div>
      <h1>Ahoj, vývojáři front-endu!!!</h1>
      <h2>Ukázka použití proměnných v CSS.</h2>
      <p>Pokračujte ve čtení</p>
  </div>
  <div class="alert">Klikni na mě!</div>

Stylizujeme nově přidaný element. Do stávajícího CSS kódu přidáme následující:

.alert {
      --bg-color: red; /* Definice lokální proměnné */
      background-color: var(--bg-color); /* Použití lokální proměnné pro barvu pozadí */
      padding: 10px 20px;
      border-radius: 4px;
      font-weight: var(--font-weight); /* Použití globální proměnné pro tloušťku písma */
      width: 50px;
  }

V uvedeném kódu jsme udělali následující:

  • Definovali jsme lokální proměnnou `–bg-color` v rámci elementu s třídou `alert`.

`–bg-color: red;`

  • Pro přístup k této lokální proměnné bylo použito klíčové slovo `var`.

`background-color: var(–bg-color);`

  • Pro tloušťku písma jsme použili globální proměnnou, kterou jsme deklarovali dříve.

`font-weight: var(–font-weight);`

Přidání JavaScript kódu

Nyní můžeme zajistit, aby na náš element s upozorněním reagoval na kliknutí. Po kliknutí se v prohlížeči objeví vyskakovací okno se zprávou: „Použili jsme CSS proměnné s JavaScriptem!!!!“

JavaScript kód přidáme přímo do HTML kódu, uzavřený ve značkách „. Kód by měl být vložen za HTML kód, ale před uzavírací značku „.

Přidáme tento kód:

<script>
      const alertDiv = document.querySelector('.alert');
      alertDiv.addEventListener('click', function() {
          window.alert("Použili jsme CSS proměnné s JavaScriptem!!!!");
      });
  </script>

Váš HTML kód by nyní měl vypadat nějak takto:

Náš JavaScript kód provádí následující:

  • Používáme funkci `document.querySelector()` k nalezení elementu s třídou `alert`.
  • Element `alert` uložíme do proměnné `alertDiv`.
  • Na element `alertDiv` použijeme metodu `addEventListener()` pro přidání události `click`.
  • Pomocí funkce `window.alert()` zobrazíme zprávu, když dojde k události kliknutí.

Po vykreslení stránky se zobrazí následující:

Po kliknutí na element upozornění se zobrazí:

Záložní hodnoty v CSS proměnných

Co se stane, pokud se odkazujete na proměnnou, která není definována v šabloně stylů? V takovém případě se styly, které chcete aplikovat, neprojeví. Záložní hodnoty umožňují definovat hodnotu, která se aplikuje, když referencovaná proměnná neexistuje.

Záložní hodnoty jsou užitečné z následujících důvodů:

  • Pokud některé prohlížeče nepodporují CSS proměnné, můžeme zajistit, aby se styly i tak aplikovaly.
  • Pokud máte podezření, že stránka nefunguje správně kvůli neexistující CSS proměnné, můžete pomocí záložní hodnoty otestovat, zda tomu tak skutečně je.

Můžete použít i více záložních hodnot, oddělených čárkami. Například:

:root {
    --primary-color: #007bff;
  }
  .btn {
    background-color: var(--primary-color, red, yellow);
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }

V tomto případě, pokud při použití globální proměnné uděláte překlep v názvu `primary-color`, a tedy proměnná není definována, vybere se červená barva jako záložní hodnota.

Lépe to můžeme ilustrovat následujícím příkladem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
    --primary-color: #007bff;
  }
  .btn {
    background-color: var(--primary-color, red);
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
    </style>
</head>
<body>
    <button class="btn">Klikni na mě!</button>
</body>
</html>

Pokud tento kód vykreslíte v prohlížeči, získáte následující:

Nyní můžeme vzít stejný kód a udělat drobnou změnu v selektoru tlačítka takto:

.btn {
    background-color: var(--primary-colr, red); /* Chybně napsaný název proměnné */
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }

V tomto případě se v prohlížeči vykreslí následující:

Použití dynamických a vypočítaných hodnot v CSS proměnných

Dynamické hodnoty se automaticky aktualizují v závislosti na různých událostech nebo podmínkách, jako jsou například vstupy od uživatele.

Prostudujte si následující kód:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS proměnné s JavaScriptem</title>
    <style>
        :root {
          --color: #333;  
        }
        #color-input {
          margin-left: 1em;
        }
        #color-input {
          --color: var(--color-input);
        }
    </style>
  </head>
  <body>
    <label for="color-input">Vyberte barvu:</label>
<input type="color" id="color-input">
  </body>
</html>

Výše uvedený kód provádí následující:

  • Pomocí selektoru `:root` deklarujeme proměnnou `–color` s výchozí hodnotou `#333`.
  • Pomocí selektoru `#color-input` vybereme vstupní element.
  • Hodnotu `–color` nastavíme na `var(–color-input)`, což znamená, že barva se vždy aktualizuje, když uživatel vybere novou barvu pomocí nástroje pro výběr barvy.

Vypočítané hodnoty provádí výpočty na základě jiných vlastností nebo proměnných. Můžeme si to ukázat na tomto příkladu:

:root {
    --base-font-size: 14px;
    --header-font-size: calc(var(--base-font-size) * 3);
  }
  h2 {
    font-size: var(--header-font-size);
  }

Z tohoto kódu je patrné následující:

  • Máme proměnnou `–base-font-size`, která definuje základní velikost písma.
  • Máme `–header-font-size`, která je trojnásobkem hodnoty `–base-font-size`.
  • Máme selektor `h2`, který používá `var` s `–header-font-size`.
  • Všechny nadpisy `h2` na webové stránce budou mít tedy trojnásobnou velikost oproti `–base-font-size`.

Závěrem

Nyní byste měli mít jasnou představu o tom, jak efektivně používat CSS proměnné ke zrychlení vývojového procesu a jak psát kód, který je snadno udržovatelný. Vlastní proměnné můžete bez problému používat i s HTML a různými knihovnami jako je například React. Podívejte se na různé přístupy, které můžete použít ke stylování komponent v Reactu pomocí CSS.

Zdrojový kód k tomuto článku můžete nalézt zde.