Классы в CSS и HTML: как применять их на практике

Классы в CSS позволяют структурировать страницу и управлять стилями отдельных элементов. С их помощью можно создать единый дизайн и одновременно выделять нужные блоки, не нарушая общий стиль.

Добавьте элементу атрибут class, затем задайте CSS-правило через точку: .box. Примеры помогут оформить контейнеры, объединить несколько классов и стилизовать вложенные элементы.

Как добавить классы в HTML

Атрибут class в HTML присваивает элементу одно или несколько имен. Браузер использует эти имена для поиска подходящих CSS-правил. Один класс можно назначить нескольким элементам на странице.

Создайте файл index.html и вставьте в него разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример CSS-классов</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="boxes">
    <div class="box">
      Контейнер 1
    </div>
    <div class="box">
      Контейнер 2
    </div>
    <div class="box">
      Контейнер 3
    </div>
  </div>
</body>
</html>

Здесь 3 контейнера получили одинаковый класс box. Внешний элемент boxes объединяет их для размещения в ряд. В HTML имя класса пишут без точки.

Как задать стиль классу в CSS

Селектор класса выбирает элементы по значению атрибута class. Классы в CSS записывают с точкой перед именем: .box.

Создайте рядом с index.html файл styles.css. Добавьте в него правила для внешнего блока и контейнеров:

.boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.box {
  height: 200px;
  width: 200px;
  text-align: center;
  font-size: 14px;
  color: #090;
  background-color: #dddddd;
}

Свойство display: flex размещает дочерние контейнеры в ряд. Значение gap: 10px задает промежутки между ними. Правило flex-wrap: wrap разрешает перенос при нехватке ширины.

Откройте index.html в браузере. Если ширины окна хватает, появятся 3 серых квадрата в ряд. Каждый квадрат получит размер 200 × 200 пикселей.

Обычно достаточно селектора .box без названия тега. Он подходит для любого элемента с таким классом. Селектор div.box выбирает только элементы div и повышает специфичность правила.

Что произойдет с элементом без класса

Добавьте после внешнего блока еще один элемент:

<div>
  Контейнер 4
</div>

Сохраните файл и обновите страницу. Четвертый контейнер останется обычным текстовым блоком без серого фона. Селектор .box его не выбирает, потому что атрибут класса отсутствует.

Если первые 3 контейнера тоже остались без оформления, проверьте подключение. Файл styles.css должен лежать рядом с index.html. Его имя должно совпадать со значением href в разметке.

Несколько классов у одного элемента

Классы в HTML перечисляют через пробел внутри одного атрибута class. Каждый подходящий селектор добавляет элементу свои объявления свойств.

Внутри блока boxes замените разметку трех контейнеров:

<div class="box red">
  Контейнер 1
</div>
<div class="box green">
  Контейнер 2
</div>
<div class="box blue">
  Контейнер 3
</div>

После правила .box в файле styles.css добавьте цветовые классы:

.red {
  background-color: #ffcccc;
}

.green {
  background-color: #ccffcc;
}

.blue {
  background-color: #ccccff;
}

Сохраните оба файла и обновите страницу. Размеры контейнеров сохранятся, а фон станет розовым, зеленым и голубым.

Класс box задает общие размеры и оформление текста. Дополнительные классы меняют только фон. Чтобы вернуть серые квадраты, удалите из HTML классы red, green и blue.

Какое правило побеждает

Порядок классов в атрибуте class не влияет на применение CSS-правил. Записи class="box red" и class="red box" дают одинаковое оформление.

Каскад разрешает конфликты, когда несколько объявлений задают одно свойство. Для обычных правил одного источника и слоя сначала сравнивается специфичность. При равной специфичности в этих примерах побеждает последнее объявление в CSS.

.box {
  background-color: #dddddd;
}

.red {
  background-color: #ffcccc;
}

Оба селектора содержат по 1 классу и имеют одинаковую специфичность. Правило .red стоит ниже, поэтому фон будет розовым. Если перенести .box после .red, фон станет серым.

Когда порядок правил не решает конфликт

Более специфичный селектор может победить, даже если расположен выше:

div.box {
  background-color: #dddddd;
}

.red {
  background-color: #ffcccc;
}

Селектор div.box содержит класс и тег, поэтому он специфичнее .red. Элемент <div class="box red"> получит серый фон.

Каскад также учитывает важность объявлений, их источник и слои. Объявление с !important меняет обычный порядок приоритетов. Не добавляйте его для исправления каждого конфликта: причины станет сложнее находить.

Чем class отличается от id

Класс подходит для повторяющегося оформления карточек, кнопок и других компонентов. Атрибут id задает уникальный идентификатор элемента в документе.

CSS вложенные классы: как работают селекторы

Запрос «css вложенные классы» объединяет несколько разных задач. Пробел выбирает элемент внутри другого блока, а слитная запись проверяет классы одного элемента. Нативная вложенность позволяет размещать одно CSS-правило внутри другого.

Селектор потомка и дочернего элемента

Добавьте карточку с заголовком и вложенным блоком:

<article class="card">
  <h2 class="title">Название карточки</h2>
  <div>
    <p class="title">Дополнительная подпись</p>
  </div>
</article>

Селектор .card .title выбирает потомков с классом title на любой глубине:

.card .title {
  color: #090;
}

Зеленый цвет получат и заголовок, и дополнительная подпись.

Селектор .card > .title выбирает только непосредственных детей карточки:

.card > .title {
  font-size: 24px;
}

Размер 24 пикселя получит только заголовок. Между карточкой и подписью находится дополнительный div, поэтому подпись не подходит.

Два класса у одного элемента

Селектор .box.red без пробела выбирает элемент сразу с двумя классами:

.box.red {
  border: 2px solid #900;
}

Рамку получит элемент class="box red". Запись .box .red выбрала бы потомка red внутри блока box. Это разные условия, поэтому пробел между классами меняет результат.

Нативная вложенность CSS и символ &

Нативная вложенность CSS поддерживается современными браузерами и не требует препроцессора. Синтаксис описывает документация MDN о CSS nesting.

Правило заголовка можно поместить внутрь правила карточки:

.card {
  padding: 16px;
  background-color: #dddddd;

  .title {
    color: #090;
  }

  &:hover {
    background-color: #ccffcc;
  }
}

Вложенное правило .title выбирает заголовки внутри .card. Символ & обозначает родительский селектор, здесь это .card. Поэтому &:hover меняет фон самой карточки при наведении указателя.

Сохраните CSS и наведите указатель на карточку в браузере. Фон должен стать светло-зеленым, а текст заголовка останется зеленым.

Как называть классы

Выбирайте имена по назначению элемента: product-card, menu, button. Имя red-text привязывает класс к конкретному цвету. После смены оформления такое название может вводить в заблуждение.

Для повседневной работы придерживайтесь простых правил:

• Начинайте имя с латинской буквы. Имя с цифрой в начале потребует экранирования в CSS-селекторе.
• Разделяйте слова дефисом или подчеркиванием: product-card, product_card.
• Не вставляйте пробел внутрь имени: HTML воспринимает его как разделитель классов.
• Соблюдайте регистр: card и Card – разные классы.
• Используйте один способ именования во всем проекте.

HTML допускает и другие символы в именах классов. Однако некоторые из них требуют экранирования в CSS. Простые имена позволяют избежать этих сложностей.

Как устроено имя в BEM

Методология BEM разделяет блок, его элемент и модификатор. Одна из распространенных схем записи – block__element--modifier.

<article class="product-card product-card--featured">
  <h2 class="product-card__title">Название товара</h2>
</article>

Здесь product-card обозначает самостоятельный блок, а product-card__title – его заголовок. Класс product-card--featured отмечает выделенный вариант карточки. Модификатор добавляют вместе с базовым классом блока.

Где применять классы в макете сайта

Назначайте классы элементам, которые выполняют одинаковую роль в интерфейсе. Например, миниатюрам товаров, кнопкам покупки и ссылкам навигации.

.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.button {
  display: inline-block;
  padding: 10px 16px;
}

a.nav:hover {
  color: #900;
}

Класс thumbnail задает изображениям квадратную область и обрезает лишние края. Класс button добавляет отступы, а a.nav:hover меняет цвет ссылки при наведении.

Как выбрать селектор для своей задачи

• Для общего оформления нескольких элементов используйте .box.
• Для сочетания признаков одного элемента используйте .box.red.
• Для элемента внутри блока используйте .card .title.
• Для непосредственного ребенка блока используйте .card > .title.

Если цвет или размер применился неожиданно, найдите конкурирующие CSS-правила. Сравните специфичность селекторов и порядок объявлений в файле. Перестановка имен внутри class результат не исправит.

Совет от нашей редакции: начинайте оформление компонента с одного базового класса. Добавляйте модификатор, когда у компонента появится отдельное состояние или вариант.