Один из самых важных подходов во фронтенд-разработке в начале 2000-х годов — Сброс (Reset) и Нормализация (Normalize). Они были нужны для решения проблем с кроссбраузерностью. Браузеры по умолчанию имеют встроенные CSS-стили (User Agent Stylesheet), поэтому тег <h1> (или другие теги) в браузерах Chrome и Firefox (или других) мог выглядеть по-разному — разный размер шрифта, разные отступы margin.

1. Сброс стилей (CSS Reset)

Философия: «Убей всё! Сотри все стили браузера до нуля. Дай мне чистый лист».

Что делает: удаляет все встроенные стили браузера. У всех элементов margin, padding, border становятся равными 0. Заголовки, параграфы, списки — все выглядят одинаково (как обычный текст), пока вы не напишете свои стили.

Главная цель: добиться абсолютной кроссбраузерности, заставив разработчика явно прописывать каждое свойство.

Пример классического Reset:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* Дополнительно убираем маркеры у списков */
ol, ul {
    list-style: none;
}
/* Делаем ссылки без подчеркивания */
a {
    text-decoration: none;
}

Как это работает на практике:

• До применения: <h1> жирный и большой, <p> имеет отступ снизу.
• После применения: <h1> и <p> выглядят абсолютно одинаково (простой текст без отступов). Вам нужно заново задать размер шрифта для h1, отступы для p и т.д.

2. Нормализация (Normalize.css)

Философия: «Не ломай то, что работает. Приведи все браузеры к общему знаменателю, сохранив полезные дефолтные стили».

Что делает: Не удаляет стили, а подравнивает их. Если в Chrome у <h1> размер 32px, а в Firefox 24px — Normalize сделает так, чтобы везде было, например, 32px (или другое значение, но одинаковое). При этом он оставляет жирность шрифта у заголовков и отступы у параграфов.

Главная цель: Устранить различия между браузерами, но при этом сохранить встроенную семантику HTML-тегов.

Пример кода из Normalize.css (упрощенно):

/* 1. Исправляем размер шрифта и отступы во всех браузерах */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* 2. Убираем лишние отступы у списков, но сохраняем маркеры */
ul, ol {
    padding-left: 40px; /* Стандартный отступ для списков */
}

/* 3. Делаем так, чтобы тег <main> везде отображался как блок (для старых IE) */
main {
    display: block;
}

/* 4. Убираем полосу прокрутки у пре-кода, но оставляем моноширинность */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

Как это работает на практике:

• <h1> остается жирным и большим (семантически верно).
• У <p> остается отступ снизу.
• Списки <ul> остаются с отступами и точками.
• Но теперь эти отступы и размеры одинаковы во всех браузерах.

3. Современный подход

В 2026 году подход изменился по сравнению с тем, что было популярно 5–10 лет назад.

Короткий вывод:

• ❌ Полный Reset.css — практически не используется в новых проектах.
• ⚠️ Normalize.css — используется значительно реже, чем раньше.
• ✅ Современный подход — небольшой собственный reset (CSS Base/Modern Reset) + использование возможностей современных браузеров.

Сейчас используют небольшой modern reset, например:

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    color-scheme: light dark;
}

body {
    min-height: 100vh;
    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;
}

Это уже покрывает почти всё необходимое.

4. Практическая рекомендация для 2026 года

Если вы начинаете новый проект, оптимальная схема выглядит так:

• Создать небольшой reset.css (20–50 строк) с современными безопасными сбросами (box-sizing, margin, изображения, элементы форм, типографика).
• Добавить base.css с базовыми стилями сайта (шрифты, цвета, line-height, ссылки, заголовки и т. п.).
• Использовать каскадные слои (@layer) для разделения reset, базовых стилей, компонентов и утилит.
• Не подключать классический Reset.css и использовать Normalize.css только если проект требует поддержки специфичных старых браузеров или уже основан на нём.