# Якоря

Якорь — стабильный атрибут `data-lms` на элементе, который человек называет словами:
карточка курса, тело урока, шапка кабинета. По нему пишется
[свой CSS школы](/appearance/themes/):

```css
[data-lms="course-card"] { box-shadow: none; border-radius: 0; }
[data-lms="cabinet-tabbar"] { border-top: 2px solid var(--brand); }
```

Якорь — обязательство: мы его не переименовываем и не убираем. Вёрстку вокруг него
меняем свободно.

## Какие якоря есть

| Якорь | Что это | Где |
|---|---|---|
| `[data-lms="cabinet-header"]` | Шапка кабинета | Кабинет ученика: полоса со знаком школы, разделами и меню профиля |
| `[data-lms="cabinet-tabs"]` | Разделы кабинета на компьютере | «Курсы», «Мои покупки», «Поддержка» в шапке |
| `[data-lms="cabinet-tabbar"]` | Нижняя панель кабинета на телефоне | Кабинет уже 768 точек: разделы значками внизу |
| `[data-lms="course-card"]` | Карточка курса | Кабинет ученика: «Мои курсы» |
| `[data-lms="lesson"]` | Урок | Страница урока целиком — заголовок, содержимое, задание |
| `[data-lms="lesson-body"]` | Содержимое урока | Блоки урока читаемой ширины |
| `[data-lms="page"]` | Страница школы | Страницы из конструктора: лендинги, оферты, страницы продаж |

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

## Почему не классы вёрстки

Разметка собрана из утилитарных классов:

```html
<h3 class="text-body font-medium text-fg">Название курса</h3>
```

Правило `.text-body { font-size: 20px }` поменяет размер **везде, где встречается
этот класс**: в карточке курса, в подписи к платежу, в кнопке. А через месяц мы
переверстаем карточку, поставим там другой класс — и оформление школы сломается
при обновлении, молча: CSS не падает при неверном селекторе, он просто перестаёт
применяться.

Поэтому наружу объявлено не то, из чего собрана вёрстка, а то, что мы намеренно
сделали контрактом: [переменные](/appearance/variables/) и якоря.

**Атрибут, а не класс** — намеренно. Класс можно случайно перебить утилитой
и легко спутать со своим; атрибут виден как объявленный контракт и в разметке,
и в CSS.

**Один якорь — одна роль.** Если элемент встречается в двух местах и должен
настраиваться по-разному, это два якоря.

## Чего якорем не сделать

Спрятать элемент, у которого нет якоря, «подобранным» селектором технически можно,
но это отложенная поломка: при обновлении правило перестанет находить элемент.
Нужен якорь — напишите нам, какой элемент и зачем.