CSS Reset vs Normalize.css: в чём разница и что выбрать

Когда вы начинаете вёрстку с нуля, важно позаботиться о кроссбраузерном поведении элементов. Разные браузеры по-разному отображают заголовки, списки, поля форм и т. д. Чтобы привести всё к единому виду, используют Reset или Normalize стили.

Что такое CSS Reset?

Reset CSS — это подход, при котором все стили по умолчанию сбрасываются до нуля.

/* Пример CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Основная цель:

• Убрать все различия между браузерами
• Полное обнуление отступов, границ, шрифтов и прочих свойств

Минусы:

• Удаляются даже полезные стили браузера (например, стили заголовков, маркеры у списков)
• Требуется больше кастомной настройки после

Что такое Normalize.css?

Normalize.css — это библиотека, которая не сбрасывает стили, а делает их едиными во всех браузерах, сохраняя полезные дефолтные значения.

import "normalize.css";

Особенности

• Сохраняет семантику и полезные стили (например, h1 остаётся крупнее обычного текста)
• Исправляет известные баги и несоответствия в рендеринге элементов в разных браузерах
• Поддерживает современные стандарты

Главное отличие

Когда использовать?

• Reset — если вы хотите полный контроль над всеми стилями и готовы прописывать всё вручную.
• Normalize — если вы хотите согласованность между браузерами, но без полного обнуления.