В чем разница между сбросом стилей и нормализацией стилей

Что проверяют

Знаете ли вы, откуда берутся различия в отображении и что вы делаете с дефолтными стилями браузера в начале проекта. Частый следующий вопрос: что используете вы сами и что лежит в основе Tailwind Preflight или вашего UI-кита.

Как отвечать

У каждого браузера есть user agent stylesheet: отступы у body и заголовков, маркеры списков, размеры шрифтов, стили кнопок и полей ввода. Раньше они заметно различались, отсюда два подхода:

• сброс (reset): обнуляет почти всё. Классический пример CSS Reset Эрика Мейера: margin, padding, border в ноль, одинаковый размер шрифта у всех элементов, списки без маркеров. Получается чистый лист, и любой стиль нужно задать самому;
• нормализация: сохраняет полезные умолчания и выравнивает только расхождения между браузерами и известные баги. Эталон normalize.css: каждое правило в нём прокомментировано, видно, какой браузер оно чинит.

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

Сейчас картина смешанная. Браузеры расходятся гораздо меньше, а normalize.css давно не обновлялся, поэтому в проектах чаще встречаются modern-normalize или короткие «современные ресеты» Энди Белла и Джоша Комо. Последние ставят box-sizing: border-box, убирают внешние отступы, делают img блочным с max-width: 100%, наследуют шрифт в button и input. Tailwind Preflight построен поверх modern-normalize, но сбрасывает агрессивнее: у заголовков нет размеров, у списков нет маркеров.

Где спотыкаются

Называют * { margin: 0; padding: 0; } полноценным ресетом. Это лишь его часть, она не трогает шрифты, списки и стили форм.

Забывают про доступность. Старые ресеты убирали outline у фокуса, и пользователь клавиатуры терял понимание, где он находится. А list-style: none в Safari может лишить список семантики для VoiceOver, поэтому навигационным спискам добавляют role="list".

Подключают и ресет, и нормализацию одновременно, а потом полдня выясняют, какое правило перебивает какое.