18. CSS változók és modern technikák

2025. november 23. • 18 perc olvasás • CSS3 haladó

A CSS változók (Custom Properties) forradalmasították a stíluslapok írását. Ebben a cikkben megismerheted a változók használatát, a calc() függvényt, a téma rendszereket és a BEM módszertant.

Érettségi információ

Ez a lecke BÓNUSZ anyag!

A CSS változók, calc() és BEM módszertan NEM részei az érettségi követelményeknek. Ezek modern technikák, amelyek a professzionális webfejlesztésben hasznosak.

CSS változók (Custom Properties) BÓNUSZ

A CSS változók újrafelhasználható értékeket tárolnak, amelyek dinamikusan módosíthatók.

CSS - Változók definiálása és használata

/* Változók definiálása :root-ban (globális) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;

  --font-primary: 'Roboto', sans-serif;
  --font-size-base: 16px;

  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --border-radius: 8px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Változók használata var() függvénnyel */
.button {
  background-color: var(--primary-color);
  font-family: var(--font-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* Fallback érték megadása */
.element {
  color: var(--undefined-color, #333);  /* Ha nincs, #333 lesz */
}

/* Lokális változó (csak ezen az elemen belül) */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card.compact {
  --card-padding: 10px;  /* Felülírás */
}

Változók öröklődése

CSS - Változók kaszkádolása

/* Változók öröklődnek a gyerek elemekre */
.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

.theme-light {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* A gyerek elemek automatikusan használják */
.card {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Hover-re változtatás */
.button {
  --btn-bg: var(--primary-color);
  background: var(--btn-bg);
}

.button:hover {
  --btn-bg: var(--primary-dark);
}

calc() függvény BÓNUSZ

CSS - calc() számítások

/* calc(): különböző egységek kombinálása */

/* Teljes szélesség mínusz sidebar */
.main-content {
  width: calc(100% - 250px);
}

/* Viewport mínusz header */
.content {
  min-height: calc(100vh - 60px);
}

/* Matematikai műveletek */
.element {
  width: calc(100% / 3);           /* Osztás */
  margin: calc(20px * 2);          /* Szorzás */
  padding: calc(10px + 2vw);       /* Összeadás */
  font-size: calc(1rem + 0.5vw);   /* Fluid tipográfia */
}

/* CSS változókkal kombinálva */
:root {
  --header-height: 60px;
  --footer-height: 80px;
  --spacing: 20px;
}

.page-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding: calc(var(--spacing) * 2);
}

/* Negatív érték */
.overlap {
  margin-top: calc(-1 * var(--spacing));
}

Téma rendszer (Dark/Light mode) BÓNUSZ

CSS - Dark mode implementáció

/* Light téma (alapértelmezett) */
:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-border: #e0e0e0;
  --color-primary: #007bff;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Dark téma - automatikus (rendszer beállítás) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-surface: #2d2d2d;
    --color-text: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-border: #404040;
    --color-primary: #4dabf7;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
}

/* Dark téma - manuális class-szal */
[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-surface: #2d2d2d;
  --color-text: #ffffff;
  /* ... */
}

/* Használat az egész oldalon */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

JavaScript - Témaváltó

// Témaváltó JavaScript
const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
};

// Mentett téma betöltése
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

BEM módszertan BÓNUSZ

A BEM (Block Element Modifier) egy elnevezési konvenció, ami strukturáltabbá teszi a CSS-t.

CSS - BEM elnevezési konvenció

/* BEM: Block__Element--Modifier */

/* Block: önálló komponens */
.card { }
.button { }
.nav { }

/* Element: a block része (kettős aláhúzás) */
.card__title { }
.card__image { }
.card__body { }
.card__footer { }

/* Modifier: variáció (kettős kötőjel) */
.card--featured { }
.card--compact { }
.button--primary { }
.button--large { }
.button--disabled { }

/* Teljes példa */
.card {
  background: white;
  border-radius: 8px;
}

.card__image {
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.card__title {
  font-size: 1.25rem;
  margin: 0;
}

.card__body {
  padding: 20px;
}

.card--featured {
  border: 2px solid var(--primary-color);
}

.card--featured .card__title {
  color: var(--primary-color);
}

BEM előnyei

Önleíró: A class nevéből látszik a struktúra
Lapos specificitás: Nincs mélyen ágyazott szelektor
Újrafelhasználható: Komponensek más projektekben is
Együttműködés: Csapatban könnyebb megérteni

CSS Reset és Normalize BÓNUSZ

CSS - Modern reset

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Focus outline akadálymentességhez */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

Összefoglalás

CSS változók: --nev és var(--nev) szintaxis
:root: Globális változók definiálása
calc(): Matematikai műveletek CSS-ben
Téma rendszer: prefers-color-scheme és data-theme
BEM: Block__Element--Modifier elnevezés
CSS Reset: Böngészők közötti konzisztencia

Következő lépések

Következő cikk: CSS Összefoglaló és érettségi felkészítő - Átfogó CSS összefoglaló az emelt szintű érettségire!