# Сопровождение CSS портала ТОС БГО

Обновлено: 10 июля 2026 года.

## Назначение

Этот документ фиксирует безопасный порядок работы с `assets/css/styles.css`. Сейчас сайт использует единый компактный CSS-файл. Это удобно для загрузки, но усложняет точечные правки: один класс может влиять на главную страницу, каталог ТОС, карточки, новости, рабочие страницы и печатные материалы.

Цель ближайших изменений — улучшить сопровождаемость без визуальных изменений.

## Главное правило

Сначала карта и контроль, потом рефакторинг. Нельзя переименовывать классы, удалять правила или менять переменные без проверки контрольных страниц.

## Карта текущих групп

| Группа | Что включает | Риск |
|---|---|---|
| tokens | `:root`, `[data-theme=dark]` | Высокий: меняет весь сайт и обе темы |
| base | `body`, ссылки, контейнер, фокус, skip-link | Средний: влияет на доступность и базовую читаемость |
| header | шапка, меню, бренд, кнопки меню и темы | Высокий: влияет на все страницы и мобильное меню |
| buttons | `.btn`, `.hero-actions`, `.card-actions`, `.chip` | Средний: используется почти везде |
| hero | `.hero`, `.hero-card`, `.hero-grid`, `.lead`, `h1` | Средний: влияет на первое впечатление страниц |
| grid-cards | `.section`, `.grid`, `.card`, `.wide`, `.half`, `.full` | Высокий: основа большинства страниц |
| content | `.prose`, `.notice`, `.table`, `.tag`, `.meta`, `.toc` | Средний: влияет на материалы и рабочие таблицы |
| home | `.home-panel`, `.home-focus`, `.portal-strip`, `.highlight-card` | Средний: специальные блоки главной страницы |
| responsive | media-запросы `900px` и `620px` | Высокий: легко сломать мобильный вид |
| print | `.print-only`, `@media print` | Средний: важно для чек-листов и документов |

Источник подробной инвентаризации: `data/css_maintenance_inventory.csv`.

## Матрица визуальной регрессии

Контрольные случаи хранятся в `data/css_regression_matrix.csv`.

Матрица фиксирует:

- конкретный маршрут;
- ширину и высоту viewport;
- светлую или тёмную тему;
- действие пользователя: открытие меню, смена темы или предпросмотр печати;
- ожидаемый визуальный результат;
- статус проверки;
- ссылку на доказательство сравнения.

Поддерживаемые статусы:

- `baseline_required` — исходный снимок ещё не зафиксирован;
- `baseline_captured` — исходный вид сохранён;
- `passed` — после изменения регрессий не найдено;
- `failed` — обнаружено визуальное отличие;
- `blocked` — проверку пока невозможно выполнить.

Для статусов `baseline_captured`, `passed` и `failed` поле `evidence_ref` обязательно. В публичный репозиторий нельзя помещать снимки с закрытыми данными.

## Контрольные страницы перед CSS-правками

Перед любыми изменениями нужно открыть и проверить:

1. Главную страницу `/`.
2. Каталог ТОС `/tos/`.
3. Карточку ТОС `/tos/mirolyubie/`.
4. Новости `/news/`.
5. Отдельную новость `/news/vk-community-channel-2026/`.
6. Рабочую панель `/workbench/`.
7. Быстрые маршруты `/workbench-routes/`.
8. Табличную служебную страницу `/site-health/`.
9. Мобильное меню на ширине 360 пикселей.
10. Промежуточные размеры 620 и 900 пикселей.
11. Светлую и тёмную тему.
12. Печатную версию `/field-checklist/`.

## Как фиксировать baseline

1. Открыть маршрут из матрицы на указанной ширине и высоте.
2. Применить указанную тему и действие.
3. Проверить пункт `expected_check`.
4. Сохранить снимок или ссылку на результат проверки.
5. Указать ссылку в `evidence_ref`.
6. Поменять статус на `baseline_captured`.
7. Не использовать статус `passed`, пока CSS ещё не менялся и сравнение не выполнено.

## Безопасный порядок рефакторинга

1. Зафиксировать baseline всех обязательных контрольных случаев.
2. Не менять значения CSS, а сначала добавить комментарии-разделители.
3. Сравнить контрольные страницы с baseline.
4. При отсутствии отличий отметить случаи как `passed`.
5. Затем вынести исходные секции в отдельные рабочие файлы, если будет выбран такой подход.
6. Итоговый `assets/css/styles.css` должен оставаться совместимым с текущими HTML-страницами.
7. После каждого этапа запускать проектный аудит, проверять внутренние ссылки и нулевой accessibility baseline.

## Что можно делать автономно

- Добавлять документацию и карту CSS-групп.
- Поддерживать матрицу контрольных страниц.
- Добавлять комментарии-разделители без изменения правил после фиксации baseline.
- Искать дубли и потенциально устаревшие классы.
- Готовить план разбиения CSS на исходные модули.

## Что нельзя делать без визуальной проверки

- Удалять классы, даже если они кажутся неиспользуемыми.
- Переименовывать `.card`, `.btn`, `.section`, `.grid`, `.tag`, `.notice`, `.table`, `.hero`.
- Менять CSS-переменные цветов, радиусов, теней и ширины контейнера.
- Менять media-запросы без проверки мобильного меню.
- Менять print-стили без проверки печатных материалов.
- Считать проверку пройденной без `evidence_ref`.

## Следующий безопасный шаг

Зафиксировать исходные снимки для случаев со статусом `baseline_required`. После этого добавить в `assets/css/styles.css` только комментарии-разделители, не меняя правила и значения.