Зачем нужна семантика в CSS классах?
Основы CSS
Семантика в классах нужна, чтобы класс описывал назначение элемента, а не его внешний вид: тогда код понятнее и легче меняется.
Пример
<!-- по виду -->
<div class="blue-box padding-20">…</div>
<!-- по смыслу -->
<div class="notification notification--info">…</div>Что это даёт
- Понятность — по классу видно, что это за блок.
- Устойчивость к редизайну — меняем стили в CSS, не трогая HTML.
- Удобство поиска — легко найти все уведомления в коде.
- Совместная работа — дизайнеры и разработчики говорят на языке компонентов.
Когда классы по виду допустимы
В utility-first подходе (Tailwind) классы намеренно описывают стили, а смысл задают компоненты, в которые эти классы завёрнуты.
Коротко для собеседования
Семантичные классы описывают назначение элемента, поэтому код понятнее и переживает изменения дизайна без правок HTML.
Подробнее: БЭМ — Методология