# 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!