Hack Frontend Community

Разница между CSS Reset и Normalize

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


Что такое CSS Reset?

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

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

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

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

Минусы:

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

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

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

import "normalize.css";

Особенности

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

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

ХарактеристикаCSS ResetNormalize.css
ПодходПолный сбросВыравнивание и сохранение полезных стилей
Стили заголовковОбнуляютсяСохраняются с поправками
Требует доработкиДаОбычно — нет
Уровень контроляВысокий (всё с нуля)Средний (базовая согласованность)

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

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

Вывод:

Если вы работаете над быстрым прототипом — используйте Normalize. Если создаёте UI-библиотеку — возможно, лучше подойдёт Reset или кастомный подход.