Открываете чистый HTML-файл в браузере. Заголовки h1 огромные, ссылки синие с подчёркиванием, отступы у параграфов какие-то странные. Это браузерные стили по умолчанию - и в каждом браузере они разные.
Разработчики решили проблему двумя способами: Reset.css и Normalize.css. Первый обнуляет вообще всё. Второй оставляет полезное и приводит к общему знаменателю.
Какой выбрать? И нужны ли они вообще в 2026 году?
Зачем сбрасывать стили
Каждый браузер применяет свои стили по умолчанию. Chrome делает отступы одни, Firefox - другие, Safari - третьи. Кнопки выглядят по-разному, формы отображаются не одинаково.
Раньше это была катастрофа. Сайт в Chrome выглядел нормально, в Firefox - криво, в IE вообще разваливался. Разработчики тратили часы, выравнивая отображение.
Reset.css и Normalize.css решают эту проблему, но по-разному.
Reset.css: табула раса
Reset.css появился первым. Идея простая: обнулить вообще все стили браузера. Заголовки, списки, отступы, шрифты - всё в ноль.
После применения Reset.css заголовок h1 выглядит как обычный текст. Список ul теряет маркеры. Кнопка становится невидимой.
Логика: лучше начать с чистого листа и прописать всё вручную, чем бороться с браузерными стилями.
Минусы:
Вы теряете полезные стили. Например, жирность заголовков, отступы между параграфами. Приходится восстанавливать это вручную.
Доступность страдает. Браузерные стили учитывают accessibility - семантику, фокус, навигацию. Reset убирает это, и нужно возвращать руками.
Итоговый CSS становится тяжелее. Сначала обнулили, потом прописали заново. Двойная работа.
Normalize.css: умный подход
Normalize.css вышел позже как альтернатива Reset. Философия другая: не обнулять всё, а привести к единому стандарту.
Что делает Normalize:
Исправляет баги браузеров. Например, Chrome и Safari по-разному отображают элемент <input type="search">. Normalize приводит к единому виду.
Сохраняет полезные стили. Заголовки остаются заголовками, списки - списками. Семантика не страдает.
Нормализует отступы и шрифты. Приводит margins, paddings, font-size к общему знаменателю, но не обнуляет полностью.
Весит всего 2 КБ. Reset обычно тяжелее, плюс вы добавляете свои стили сверху.
Что выбрать
Используйте Normalize, если:
- Хотите сохранить семантику HTML
- Нужна accessibility из коробки
- Не хотите прописывать базовые стили заново
Используйте Reset, если:
- Делаете полностью кастомный дизайн с нуля
- Готовы прописать все стили вручную
- Не доверяете браузерным стандартам
В 90% случаев Normalize - лучший выбор. Он современнее, легче, сохраняет полезное.
А нужны ли они вообще?
Браузеры стали лучше. Стандарты CSS выровнялись. Различия в базовых стилях минимальны.
Современные фреймворки (Tailwind, Bootstrap) включают нормализацию по умолчанию. Если используете их - отдельный Normalize не нужен.
Но если пишете CSS с нуля, Normalize всё ещё актуален. Он экономит время и избавляет от мелких багов кроссбраузерности.
Reset устарел. Его использовали в эпоху IE6 и Firefox 2. Сейчас он избыточен.
Как подключить
Normalize.css:
Или через npm:
И импорт в CSS:
Вывод
Normalize.css - современный стандарт для сброса стилей. Он не убивает полезные браузерные стили, а приводит их к единообразию.
Reset.css - устаревший подход. Обнулять всё и прописывать заново - двойная работа без выгоды.
Если делаете сайт с нуля на чистом CSS - подключайте Normalize. Если используете фреймворк - проверьте, не включён ли он уже (обычно включён).
Кроссбраузерность стала проще, но мелкие различия остаются. 2 КБ Normalize избавят от головной боли.
Используете Normalize или Reset? Или вообще обходитесь без них?