Атрибут class в HTML - група стилів елемента

Голобальний атрибут class допомагає задати список класів елемента, розділених пробілами ASCII.

Кожна назва класу може містити будь-які символи Unicode (за винятком, звичайно, пробілів ASCII). Однак, під час використання в селекторах CSS, або з JavaScript за допомогою API, таких як document.querySelector(), або в таблицях стилів CSS, значення атрибутів класу повинні бути дійсними ідентифікаторами CSS. Це означає, що якщо значення атрибута класу не є валідним (наприклад, foo?boom або 1234), то його необхідно екранувати перед використанням у селекторі, або за допомогою методу CSS.escape(), або вручну.

З цієї причини рекомендується вибирати значення для атрибутів class, які є валідними, щоб не екрануванти їх.

Хоч варіативність значень для атрибуту class дозволяє використовувати будь-які символи Unicode, але для зручності і кращої сумісності з іншими інструментами, рекомендується використовувати лише латинські літери, цифри, дефіси та підкреслення. Це допоможе уникнути проблем.

<div class="example example_secondary">...</div>

<section class="posts">
  <h2 class="posts__title">Новини</h2>
  <div class="posts__grid">
    <article class="post">
      <h3>Заголовок</h3>
      <p>Короткий опис статті.</p>
      <a href="#">Читати далі</a>
    </article>
    <article class="post">
      <h3>Заголовок</h3>
      <p>Короткий опис статті.</p>
      <a href="#">Читати далі</a>
    </article>
    <article class="post">
      <h3>Заголовок</h3>
      <p>Короткий опис статті.</p>
      <a href="#">Читати далі</a>
    </article>
  </div>
</section>
<!-- "Читати далі" поганий зміст для тегу а.
      Не повторюйте в реальних проектах. -->

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
.posts {
  padding: 1rem;
}
.posts__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.6rem 1.4rem;
}
.post {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}