PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

В чем разница между Reset.css и Normalize.css?

Основы CSS

Оба подхода убирают различия стандартных стилей браузеров, но по-разному: Reset.css обнуляет почти всё, Normalize.css приводит стили к единому полезному виду.

Reset.css

* { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
  • Удаляет отступы, размеры заголовков, маркеры списков.
  • Всё оформление приходится задавать самому.
  • Удобно, когда дизайн полностью свой.

Normalize.css

  • Сохраняет полезные стандартные стили (заголовки остаются крупными, у списков есть маркеры).
  • Исправляет баги и различия браузеров: размер шрифта h1 внутри article, отображение button и input.
  • Подходит, когда стандартные стили устраивают, но нужна предсказуемость.

На практике сейчас

Часто используют лёгкие «современные ресеты» (например, от Andy Bell или Josh Comeau) — короткий набор правил: box-sizing: border-box, margin: 0, адекватные img и line-height.

Коротко для собеседования

Reset обнуляет стили браузера, Normalize выравнивает их между браузерами, сохраняя полезные значения по умолчанию.

Подробнее: Normalize.css

Другие вопросы раздела