Привет, Хабр! 👋
Сегодня обсудим:
Как дизайнеру грамотно называть классы в HTML, чтобы проект был понятен не только разработчикам, но и самому себе.
Разберём, как заложить логику классов уже на этапе дизайна в Figma, чтобы работа была структурированной и удобной для всех участников.
Почему правильные названия классов важны?
Многие дизайнеры считают, что верстка — задача разработчиков. Но структура кода начинается с дизайна. Если слои в макете не организованы, разработчику придётся разбираться вручную, а это замедляет проект.
Правильное именование классов:
Быстро передаёт логику интерфейса от дизайна к коду.
Упрощает поиск и правки элементов.
Ускоряет работу всей команды.
Как закладывать названия классов в Figma?
1. Осмысленно именуйте слои
Избавьтесь от названий вроде Rectangle 57. Используйте понятные иерархические названия, отражающие суть элемента:
button/primary вместо Rectangle 3.
card/header вместо Frame 7.
Используйте иерархию через /:
form/input — поле формы.
menu/item, menu/icon — структура меню.
2. Смысл важнее внешнего вида
Названия должны описывать функциональность элемента, а не его внешний вид:
❌ red-button, big-header.
✅ button/primary, header/main.
3. Группируйте элементы в компоненты
Например, карточка:
card/container — внешний фрейм.
card/header — заголовок.
card/description — текст.
4. Добавляйте комментарии
Если элемент сложный, подпишите его в Figma:
У слоя button/primary напишите: «Класс button--primary».
Как формировать названия классов в HTML?
1. Используйте методологию BEM
Методология BEM (Block Element Modifier) позволяет структурировать классы:
Блок — независимый элемент (button, card).
Элемент — часть блока (card__title, button__icon).
Модификатор — состояние или вариация (button--primary, button--disabled).
Пример:
<div class="card">
<h3 class="card__title">Заголовок</h3>
<p class="card__description">Описание</p>
<button class="button button--primary">Подробнее</button>
</div>
2. Не перегружайте классы визуальными характеристиками
❌ card-blue-border.
✅ card--highlighted (если это акцентная карточка).
3. Сократите вложенность
Чем проще структура, тем легче её поддерживать.
Плохой пример:
<div class="container">
<div class="card">
<div class="card__header">
<h3 class="card__title">Заголовок</h3>
</div>
</div>
</div>
Лучше так:
<div class="card">
<h3 class="card__title">Заголовок</h3>
</div>
Практический пример: кнопки
В макете есть три вида кнопок: основная, второстепенная и отключённая.
В Figma:
button/primary.
button/secondary.
button/disabled.
В HTML:
<button class="button button--primary">Купить</button>
<button class="button button--secondary">Подробнее</button>
<button class="button button--disabled" disabled>Недоступно</button>
Если названия в Figma понятные, разработчик легко перенесёт их в HTML.
Частые ошибки
Слои без имён
Rectangle 47 или Frame 8 только замедляют работу.
Визуальные характеристики в названиях
Названия вроде red-button или big-header усложняют масштабирование проекта.
Сложные иерархии
Чрезмерная вложенность в макете или коде создаёт путаницу.
Мини-чеклист для дизайнера
Осмысленно и структурировано именуйте слои в Figma.
Избегайте визуальных характеристик в названиях.
Используйте иерархию через / для группировки элементов.
Добавляйте подсказки для разработчиков.
Согласуйте с командой принципы именования до старта.
Итоги
Грамотно продуманные названия классов и слоёв:
Упрощают связь между дизайном и кодом.
Экономят время команды.
Делают проект удобным для доработок и масштабирования.
Закладывайте структуру на этапе дизайна, и работа станет проще для всех. 🚀
Где почитать:
BEM для дизайнеров от DSGNERS
Подробно на Хабре про взаимодействие дизайнеров и разработчиков от PIXONIC
Про нейминг слоев от Павла Пономаренко
До связи 🤝
