Сброс стилей

Каждый браузер приносит собственную таблицу стилей: у body есть поле в 8 пикселей, у заголовков и абзацев — внешние отступы, у списков — маркеры и внутренний отступ слева, у кнопок — свой шрифт. Значения в разных браузерах исторически немного отличались, и одна и та же вёрстка выглядела по-разному. Сброс выключает эти умолчания, и дальше разработчик задаёт всё явно.

Подходов три. Жёсткий сброс, самый известный вариант которого предложил Эрик Мейер, обнуляет почти всё, вплоть до размеров заголовков. Нормализация, как в normalize.css, наоборот, сохраняет полезные умолчания и правит только расхождения. Современные «минимальные» сбросы — середина: десяток правил, которые снимают самые неудобные настройки.

Пример минимального сброса

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, figure, ul, ol { margin: 0; }

img, picture, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; }

Первое правило меняет блочную модель: ширина начинает включать отступы и рамку. Последнее заставляет поля форм наследовать шрифт сайта, а не системный.

Где сброс вредит

• Убранный outline. Правило :focus { outline: none; } лишает пользователей клавиатуры видимого фокуса. Если обводка мешает дизайну, её заменяют своей, а не удаляют.
• Списки без маркеров. После list-style: none Safari с VoiceOver может перестать объявлять список списком. Поэтому маркеры снимают только у списков с классом, например у меню.
• Конфликт с готовым кодом. Жёсткий сброс в теме ломает вид виджетов и контента из визуального редактора, которые рассчитывали на обычные отступы.

Как подключать

Сброс ставят первым, чтобы следующие правила его перекрывали. В новых проектах удобно положить его в отдельный слой каскада: @layer reset, base, components;. Тогда правила сброса проиграют любым стилям из последующих слоёв, даже если у их селекторов выше специфичность.