Какие знаешь виды CSS Reset?

CSS Reset: основные подходы

CSS Reset — это техника нормализации стилей браузера для обеспечения консистентного отображения сайта. Существует несколько основных видов:

1. Eric Meyer Reset

Классический вариант от Eric Meyer — обнуляет отступы, поля и стили по умолчанию:

html, body, div, span, applet, object, iframe,
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Плюсы: предсказуемый результат, полный контроль Минусы: много кода, нужно переопределять всё вручную

2. Normalize.css

Более тонкий подход — нормализует стили вместо их обнуления:

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Сохраняет полезные браузерные стили, делает их консистентными. Идеален для большинства проектов.

3. Tailwind Reset

Префлайт (Preflight) в Tailwind CSS — минималистичный reset специально для утилитарного подхода:

* {
  border-color: currentColor;
}

body {
  margin: 0;
  line-height: inherit;
}

4. Custom Reset

Модерный подход с CSS переменными:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

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

Сравнение подходов

Рекомендация

Для современных проектов рекомендую:

• Tailwind + Preflight — если используешь фреймворк
• Normalize.css — для обычного CSS
• Custom reset — если нужна максимальная гибкость

Главное правило: выбирай один вариант и используй его консистентно по всему проекту.