PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Есть ли семантика в CSS классах?

Основы CSS

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

Сравнение

<!-- описывает вид -->
<button class="red big-text mt-20">Удалить</button>
<!-- описывает смысл -->
<button class="button button--danger">Удалить</button>

Если дизайн изменится и кнопка станет оранжевой, класс red начнёт врать, а button--danger останется верным.

Зачем это нужно

  • код понятнее: по классу ясно назначение;
  • стили легче менять, не трогая HTML;
  • проще искать и рефакторить.

Исключение — utility-first

В Tailwind и похожих подходах классы намеренно описывают вид (text-red-600, mt-4). Там смысл переносится в компоненты, а классы — это атомарные стили. Это осознанный компромисс.

Коротко для собеседования

Браузеру семантика классов не нужна, а людям — да: классы по смыслу (card__title) устойчивее к изменениям дизайна, чем классы по виду (red); исключение — utility-first подход.

Подробнее: БЭМ — Именование

Другие вопросы раздела