Class attribútum használata HTML-ben

A class attribútum lehetővé teszi, hogy HTML elemeket csoportosítsunk és egyedi stílusokat vagy működéseket rendeljünk hozzájuk. Ez kulcsfontosságú a CSS és JavaScript alkalmazásánál.

Mi az a class attribútum?

A class egy név, amit az elemhez rendelünk. Ennek alapján az elem egy vagy több stílushoz vagy funkcióhoz tartozhat. A class neve után a CSS fájlban vagy JavaScript-ben hivatkozhatunk az elemre.

<p class="highlight">This is a highlighted paragraph.</p>

Class alkalmazása több elemre

A class attribútum célja, hogy több hasonló elemhez ugyanazt a stílust vagy viselkedést kapcsoljuk. Például, ha több doboz kinézetét szeretnénk egységesíteni.

<div class="card">
  <h2 class="card-title">Product Title</h2>
  <p class="card-description">Short product description.</p>
</div>

Több class használata egy elemnél

Egy HTML elemhez több class is rendelhető, szóközzel elválasztva. Így kombinálhatunk különböző stílusokat, például egy szöveg lehet egyszerre piros és félkövér.

<p class="text-bold text-red">Important message</p>

Újrafelhasználhatóság

A class előnye, hogy újra és újra felhasználható különböző elemeknél. Így nem kell minden elemnél külön stílust vagy viselkedést beállítani.

Class nevek elnevezése

Érdemes beszédes, érthető neveket adni a class-oknak, pl. .nav-bar vagy .card-title. Kerüljük a túl általános vagy zavaros elnevezéseket.

<div class="navigation-bar">
  <a class="nav-item" href="#">Home</a>
  <a class="nav-item" href="#">About</a>
</div>

Class és CSS kapcsolata

A class attribútum legfőbb szerepe a CSS-sel való kapcsolatban rejlik. Ha azonos nevű osztály szerepel a CSS-ben, akkor a HTML elem automatikusan megkapja a hozzá tartozó stílusokat.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<p class="highlight">This paragraph is styled using a class.</p>

Több class kombinálása

Ha több class-t adsz meg egy elemnek, az mindegyikhez tartozó stílust örökli. Így egyszerre lehet egy gomb nagyobb, színes és szegélyes is – minden class külön feladatot lát el.

<style>
  .btn {
    padding: 10px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<button class="btn btn-primary">Click me</button>

BEM elnevezési konvenció

A BEM (Block Element Modifier) egy népszerű osztályelnevezési módszer, amely segíti az átláthatóságot és újrafelhasználhatóságot. Pl.: card__title vagy card--featured. A dupla aláhúzás az elemre, a dupla kötőjel a módosítóra utal.

<div class="card card--featured">
  <h2 class="card__title">Article Title</h2>
  <p class="card__text">Some text here.</p>
</div>

Tippek class használathoz

Ne használj túl hosszú vagy zavaros osztályneveket. Tartsd be az egységes konvenciókat (például kebab-case), és kerüld a CSS kulcsszavak használatát class névként. Gondolkodj újrafelhasználhatóságban: egy jól elnevezett class sok helyen visszaköszönhet.

Class dinamikus módosítása JavaScript segítségével

JavaScript segítségével a class attribútumot módosíthatjuk. A classList objektummal hozzáadhatunk, eltávolíthatunk vagy ellenőrizhetünk class-okat az elemeken keresztül.

<script>
  document.querySelector("p").classList.add("new-style");
</script>