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

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

reset.css - это специальный CSS файл, который сбрасывает или нормализует стили браузера по умолчанию. Разные браузеры имеют различные стили по умолчанию для стандартных HTML элементов (margin, padding, font-size и т.д.), что приводит к несогласованному отображению веб-сайтов. Reset.css решает эту проблему, удаляя или унифицируя эти стили, предоставляя разработчикам чистую базу для работы.

Почему нужен reset.css?

Проблема: несогласованность браузеров

Без reset.css каждый браузер отображает HTML элементы по-своему:

<!-- Без reset.css -->
<h1>Заголовок</h1>
<p>Параграф</p>
<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ul>

<!-- В Chrome: h1 имеет margin 21.44px сверху и снизу
     В Firefox: h1 имеет margin 0.67em сверху и снизу
     В Safari: свои значения
     Результат: разное отображение в каждом браузере! -->

Reset.css устраняет эти различия, создавая единообразный стартовый базис.

Что делает reset.css

Reset.css обычно включает:

1. Удаление margin и padding с заголовков, параграфов, списков
2. Сброс размера шрифта на стандартное значение
3. Удаление border у некоторых элементов
4. Сброс line-height на значение по умолчанию
5. Унификация стилей форм (input, textarea, button)
6. Сброс list-style у списков

Простой пример reset.css

/* Самый базовый reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Полный professional reset.css

/* ===== RESET CSS ===== */

/* Убираем стили по умолчанию у всех элементов */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* Устанавливаем базовые стили html и body */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
}

/* Параграфы */
p {
  margin: 0;
}

/* Списки */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* Ссылки */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
}

a:hover {
  text-decoration: none;
}

/* Изображения */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Таблицы */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td, th {
  padding: 0;
  text-align: left;
  vertical-align: top;
}

/* Формы */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
}

/* Устраняем outline на focus для некоторых браузеров */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* Blockquote */
blockquote {
  margin: 0;
  padding: 0;
}

/* Code */
code, pre {
  font-family: 'Courier New', monospace;
  font-size: 1em;
}

pre {
  margin: 0;
  padding: 0;
  overflow: auto;
}

/* Прочие элементы */
hr {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

Reset.css vs Normalize.css

Существуют два основных подхода к решению проблемы браузерных стилей:

Reset.css

Сбрасывает все стили:

/* reset.css - удаляет все стили */
h1 { margin: 0; padding: 0; font-size: 100%; }
body { margin: 0; padding: 0; }

Преимущества:

• Полная контроль - разработчик сам устанавливает все стили
• Предсказуемое поведение

Недостатки:

• Больше работы - нужно стилировать даже базовые элементы
• Больший код

Normalize.css

Нормализует стили, сохраняя полезные браузерные стили:

/* normalize.css - унифицирует, но сохраняет полезные стили */
h1 {
  font-size: 2em;
  margin: 0.67em 0; /* Сохраняет margin как в spec, но унифицирует значение */
}

Преимущества:

• Меньше работы
• Сохраняет некоторые полезные браузерные стили
• Улучшает доступность

Недостатки:

• Менее полный контроль

Современный подход: CSS Resets в фреймворках

Tailwind CSS

Таilwind включает встроенный preflight (свой reset):

/* В Tailwind v4 - preflight автоматически */
@import "tailwindcss";

/* Эквивалент простого reset.css уже включен */

Bootstrap

Bootstrap также включает свой reset в _reboot.scss:

/* Bootstrap reboot - собственный reset */
html {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Лучшие практики использования reset.css

1. Используй его в начале

Рeset.css должен быть первым подключённым CSS файлом:

<head>
  <!-- reset.css ПЕРВЫМ -->
  <link rel="stylesheet" href="reset.css">
  <!-- остальные стили ПОСЛЕ reset.css -->
  <link rel="stylesheet" href="styles.css">
</head>

2. Выбери подходящий вариант

• Полный контроль - используй полный reset.css
• Баланс - используй normalize.css
• Фреймворк - используй встроенный reset (Tailwind, Bootstrap)

3. Не забывай о важных элементах

/* Всегда сохраняй доступность */
body {
  font-size: 16px; /* не менее 16px для мобильных */
  line-height: 1.5; /* достаточный интервал между строками */
  color: #333; /* достаточный контраст */
}

/* Сохраняй :focus для клавиатурной навигации */
button:focus,
a:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

4. Минимизируй reset

Не переусложняй - используй только необходимое:

/* Минималистичный reset для быстрого проекта */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }

Reset.css - это неотъемлемая часть профессиональной фронтенд-разработки, обеспечивающая согласованность стилей во всех браузерах и создающая солидную основу для дальнейшей стилизации.