Имена слоёв и стабильные идентификаторы

Стабильное имя помогает узнать один логический элемент на разных ширинах и в разных состояниях. Это не описание текущих пикселей.

Проследите линии до одноимённых элементов на обеих ширинах. Имя задаёт соответствие, а не неизменную позицию. Здесь оба элемента также сохраняют родителя hero-actions; смену смыслового родителя нужно объявить как преобразование. Открыть в полном размере.

Визуальный экскурс показывает, зачем эти решения нужны команде.

Правило именования

Используйте короткие английские имена в kebab-case:

hero-title
product-grid
contact-button

Не используйте имена редактора, описание внешнего вида и суффиксы устройства:

frame-42
blue-heading
hero-title-mobile
button-375

Когда нужен тег

Добавляйте тег, если смысл нельзя получить из Figma:

home [page=home] [bp=1440] [view=default]
contact-button [action=modal:contact-modal]

Не размечайте размеры, настройки раскладки, цвета и варианты компонентов, которые уже хранит Figma. Полный список есть в грамматике тегов.

Сохраняйте идентификатор

На подготовленных ширинах и состояниях сохраняйте:

• одно логическое имя;
• одного понятного родителя, если это возможно;
• одно действие или цель, пока поведение продукта не изменилось;
• одну роль контента.

Если структура действительно меняется, покажите соответствие или запишите причину. Не прячьте отличие в новом имени устройства.

Имена повторяющихся данных

Для элемента коллекции используйте роль или тип, а для отслеживаемого экземпляра — стабильное имя:

product-grid [collection=products]
  product-card-oak-chair [item=product]

[item=product] описывает роль. Имя слоя обозначает подготовленный экземпляр.

Быстрая проверка

Скройте визуальный макет и прочитайте только дерево слоёв. Вы всё ещё должны найти корень страницы, крупные секции, важный контент и действия. Если нет, улучшите структуру или имя, а не добавляйте новые теги.