Comment on page

Рекомендация разметки для медийных проектов

Общая схема разметки

data-[проект][-[desktop|mobile]]=[группа компонентов]::[компонент]::[порядковый номер компонента]::[группа элементов]:: [элемент]::[порядковый номер элемента]::[состояние]
  • проект – символьный код проекта из списка
  • desktop или mobile – обозначение платформы
  • группа компонентов – группа, состоящая из отдельных, повторяющихся компонентов, например группа виджетов
  • компонент м название компонента, например карточка кластера или виджет
  • порядковый номер компонента – если компонент повторяются в рамках одной группы
  • группа элементов – общее название для элементов, если они обобщены, например элементы списка в саджесте поиска
  • элемент – название отдельного простого элемента
  • порядковый номер элемента – если элемент находится в списке
  • состояние – назначается, если элемент принимает разные состояния, например: opened и closed
Обратите внимание! Зеленым шрифтом указаны необязательные уровни

Описание разметки

Первый уровень – обязательный и устанавливается проектом.
Второй уровень указывается, если состоит из обобщенных одним смыслом компонентов. Таким образом он автоматически добавит уровень к дереву аналитики. Указывается как один уровень, т.е. без разделителя "::"
<div data-head-desktop="group">
...
</div>
Третий и последующие уровни назначаются для каждого компонента, группы элементов и элемента в отдельности....
<div data-head-desktop="component::1">
<div data-head-desktop="items">
<span data-head-desktop="item::1::checked">
...
</span>
</div>
</div>