CSS reset и normalize.css — сброс стилей браузера

Каждый браузер добавляет свои стили по умолчанию: отступы у заголовков, padding у списков, рамки у кнопок. CSS reset и normalize.css убирают эти несоответствия, чтобы вёрстка выглядела одинаково везде.

Проблема: стили браузера по умолчанию

Браузеры поставляются с user agent stylesheet — набором стилей, которые применяются к HTML-элементам по умолчанию. Проблема в том, что у каждого браузера они немного разные.

/* Chrome, Firefox, Safari добавляют свои стили: */

/* h1: font-size: 2em + margin: 0.67em 0 */
/* p: margin: 1em 0 */
/* ul, ol: margin: 1em 0 + padding-left: 40px + list-style */
/* button: border + background + padding + font-family системный */
/* a: color: -webkit-link + text-decoration: underline */
/* input: border: 2px inset + padding + font-family системный */
/* table: border-collapse: separate + border-spacing: 2px */

/* Из-за этого одна и та же страница выглядит по-разному */

Вот типичные проблемы без сброса стилей: в Firefox у кнопок другой внутренний отступ, в Safari input наследует системный шрифт вместо вашего, в Chrome у h1 внутри section уменьшается размер шрифта.

CSS reset — обнулить всё

Классический подход — обнулить все стили и начать с чистого листа. Самый известный — reset Эрика Мейера (2004), упрощённая версия которого до сих пор используется.

/* Классический минималистичный CSS reset */
*, *::before, *::after {
  box-sizing: border-box;  /* border не увеличивает размер элемента */
}

* {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

input, textarea, select {
  font: inherit;  /* иначе используют системный шрифт */
}

/* Проблема: слишком агрессивно — теряется семантика
   Придётся вручную восстанавливать всё нужное */

Главная проблема CSS reset: он убирает всё, включая полезное. Заголовки теряют жирность, списки — маркеры, ссылки — подчёркивание. Всё нужно писать заново.

normalize.css — сохранить нужные стили

normalize.css появился в 2011 году как альтернативный подход. Вместо обнуления он исправляет только несоответствия между браузерами, сохраняя полезные дефолты.

Что делает normalize.css внутри:

/* Примеры из normalize.css */

/* Исправляет: в IE 10 hidden элементы показываются */
[hidden] { display: none; }

/* Исправляет: в некоторых браузерах font-size у code другой */
code, kbd, samp, pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Исправляет: в Firefox кнопки добавляют лишний padding */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Исправляет: в Safari sub/sup влияют на line-height */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* И ещё ~200 строк исправлений для конкретных браузеров */

Сравнение reset vs normalize

Modern CSS Reset — актуальный вариант 2024–2025

Сейчас популярен подход Josh Comeau — минималистичный modern reset, который решает реальные проблемы без агрессивного обнуления. Именно этот вариант рекомендуется для новых проектов.

/* Modern CSS Reset by Josh Comeau (2024) */

/* 1. box-sizing на все элементы */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Убрать дефолтные margin */
* {
  margin: 0;
}

/* 3. Улучшенные дефолты для body */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;  /* сглаживание на macOS */
}

/* 4. Медиа-элементы как блочные, без переполнения */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 5. Формы наследуют шрифт */
input, button, textarea, select {
  font: inherit;
}

/* 6. Перенос слов для текстовых элементов */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 7. Изоляция корневого stacking context */
#root, #__next {
  isolation: isolate;
}

Каждое правило здесь решает конкретную реальную проблему:

• box-sizing: border-box — padding не увеличивает размер элемента (ожидаемое поведение)
• margin: 0 — убирает непредсказуемые отступы браузера
• -webkit-font-smoothing: antialiased — на macOS/iOS шрифты выглядят тоньше и чище
• display: block для img — убирает загадочный пробел снизу изображения (inline baseline)
• font: inherit — input и button не используют системный шрифт отличный от body
• overflow-wrap: break-word — длинные ссылки и слова не выходят за пределы контейнера

Как подключить reset правильно

/* Структура CSS файлов — reset ПЕРВЫМ */

/* 1. В HTML: normalize из CDN до вашего CSS */
/*  */
/*  */

/* 2. В вашем CSS файле (через @import) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

/* или modern reset прямо в начале style.css */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* 3. Потом ваши переменные и базовые стили */
:root {
  --color-text: #111827;
  --font-base: 'Inter', sans-serif;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  font-size: 1rem;
}

Bootstrap, Tailwind — встроенный reset

Популярные CSS фреймворки уже включают свой вариант сброса стилей — подключать отдельно не нужно:

• Bootstrap — включает Reboot, основанный на normalize.css с дополнительными правилами
• Tailwind CSS — включает Preflight, основанный на modern-normalize. Обнуляет отступы, размеры шрифтов у заголовков, list-style
• Bulma — использует normalize.css напрямую

Если подключить normalize.css поверх Tailwind — будут конфликты. Используйте то, что уже есть в фреймворке.

Что выбрать в 2025 году

Часто задаваемые вопросы

Нужен ли reset.css в 2025 году?

Да, но в минималистичном виде. Полный агрессивный reset как у Эрика Мейера уже не нужен — браузеры стали более совместимы. Достаточно modern CSS reset: box-sizing: border-box, margin: 0, font: inherit для форм и max-width: 100% для изображений. Это 10–15 строк, которые решают 90% типичных проблем. Если используете Tailwind или Bootstrap — там сброс уже встроен.

normalize.css vs sanitize.css — что лучше?

Оба делают схожее: исправляют кросс-браузерные несоответствия. Разница в акцентах: normalize.css консервативен — исправляет только задокументированные баги браузеров. sanitize.css добавляет больше «полезных дефолтов»: box-sizing: border-box, cursor: pointer для кнопок, display: block для медиа. Есть ещё modern-normalize (от создателей Tailwind) — минималистичный вариант, обновлённый под современные браузеры. Для новых проектов рекомендую modern-normalize или modern CSS reset Comeau.

Можно ли использовать reset и normalize вместе?

Да, и это частая практика: сначала normalize.css (исправляет баги браузеров), потом поверх ваши дополнительные сбросы (убираете то, что normalize сохранил, но вам не нужно). Порядок важен: normalize ПЕРВЫМ, ваш CSS ВТОРЫМ. Например, normalize сохраняет list-style у списков — если в вашем дизайне списки без маркеров, добавьте ul { list-style: none; } в свой файл после normalize.