# Свой CSS и JS школы

Свой CSS и JS — для всей школы сразу: страниц школы и кабинета ученика. Пишутся
в «Настройки → Оформление», карточка «Свой CSS и JS школы».

Если вы дошли сюда потому, что уже сломали страницу, — вам нужен
[Аварийный выключатель](/appearance/kill-switch/): адрес `?theme=off` открывает
любую страницу без своего кода.

## Кто может

Владелец школы, администраторы и те, кому владелец открыл право «добавлять свой
код» — то же право, что у [блоков кода](/appearance/code-blocks/) в конструкторе.
Остальным карточка видна только для чтения.

## Где действует, а где нет

| Где | Свой CSS | Свой JS |
|---|---|---|
| Страницы школы из конструктора, вебинары, сертификаты | да | да |
| Кабинет ученика: курсы, уроки, покупки, поддержка | да | да |
| Админка — все разделы, включая «Оформление» | **нет** | **нет** |
| Вход, регистрация, смена пароля и почты | **нет** | **нет** |
| Любая страница с `?theme=off` | **нет** | **нет** |

Админка и вход — без своего кода намеренно: опечатка в CSS не должна закрывать
дорогу к месту, где её чинят, а JS школы не должен исполняться там, где работают
сотрудники. Если страница школы, где исполнился ваш JS, открывает админку переходом
внутри сайта, админка загружается заново — уже без него.

**JS выполняется у каждого, кто открыл страницу школы, — с его входом.** Ставьте
только код, которому доверяете, как себе: счётчик, чат поддержки, свой виджет.
Рубильник «Выключить весь код» в «Настройки → Код школы» гасит и его.

## Что писать

В большинстве случаев — переопределение переменных. Одна строка перекрашивает школу:

```css
:root { --brand: #C2185B; }
```

Цвета заголовков, текста и фона, форму кнопок и значки меню кабинета не нужно
писать кодом — они в той же «Оформлении», карточкой «Вид страниц школы».

Для конкретного элемента — [якоря](/appearance/anchors/), стабильные атрибуты
`data-lms`, которые мы обязуемся не менять:

```css
[data-lms="course-card"] { box-shadow: none; border-radius: 0; }
[data-lms="lesson-body"] { font-size: 18px; }
```

Полный перечень переменных — [Переменные оформления](/appearance/variables/).
Разобранная до конца задача — рецепт [Перекрасить школу под фирменный стиль](/recipes/brand-colors/).

## Чего писать не стоит

**Селекторов по нашей вёрстке.** Классы вроде `.text-body` не являются контрактом:
правило по ним сломается при первой же перевёрстке — молча, при обновлении, без
ошибки в журнале. Для «уберите тень у карточки курса» есть якоря.

**Переменных с пометкой «внутренняя».** Их мы меняем свободно и без предупреждения.

**Цветов состояний.** Зелёное «оплачено» и красное «отказ» должны выглядеть одинаково
во всех школах: иначе ученик и куратор перестают понимать экран с первого взгляда.

## Что проверяется при сохранении

Только то, что спасает страницу, а не вкус:

- **размер** — CSS и JS до 1 МБ каждый; шрифты и картинки загружайте в «Файлы» и подключайте ссылкой.
  Код уходит на страницы **отдельными файлами** (`/theme/school.css`, `/theme/school.js`) с отметкой правки:
  браузер скачивает их один раз и берёт из памяти, пока код не поменяют (правка 20 сентября — раньше код
  вшивался в каждую страницу, и предел был 64 КБ и 32 КБ);
- **«</style>» в CSS и «</script>» в JS** — они закрыли бы свой тег посреди кода,
  и страница открылась бы чужой разметке;
- **фигурные скобки CSS сходятся** — несходящаяся скобка тихо съедает все правила после неё.

Ошибку синтаксиса JS покажет консоль браузера: она не пускает дальше своего тега
и странице не мешает.

## Как проверить и откатить

Сохранили — откройте страницу школы или кабинет в соседней вкладке и обновите.
Сломалось — та же страница с `?theme=off` в конце адреса откроется без своего кода.

Прежние редакции — в журнале школы («Настройки → Журнал»): каждая запись хранит,
кто поменял, что было и что стало. Вернуть — скопировать прежний текст в поле
и сохранить.

## Граница с блоками кода

Свой CSS и JS школы оформляет **всю школу**. [Блок CSS](/appearance/code-blocks/)
в конструкторе оформляет **свою страницу** или урок. Разные инструменты, разные места.

Агент свой код школы не правит: исполняемый код ставит человек с этим правом, руками.