Для чего нужен CSS reset?

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

Основные задачи CSS reset:

• Удаление стандартных отступов (padding и margin): Браузеры часто добавляют стандартные внутренние и внешние отступы к элементам типа <h1>, <p>, <ul>, <li> и т.д. Сброс этих отступов позволяет разработчику управлять ими самостоятельно.
• Сброс стилей списков: Сбрасываются маркеры (точки, цифры и т.д.) и стандартные отступы для элементов <ul>, <ol> и <li>.
• Normalizing размеров бордеров: Бордеры могут влиять на окончательный размер элементов из-за стандартной модели box-sizing. Некоторые reset-ы используют box-sizing: border-box.
• Сброс типографики: Могут быть сброшены стандартные размеры и шрифты для заголовков, параграфов и других текстовых элементов.
• Исправление различий: Устранение других мелких различий в рендеринге элементов между браузерами.

Пример простого CSS reset:

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

/* Сброс стандартных стилей списков */
ul, ol {
  list-style: none;
}

/* Сброс стандартных стилей таблиц */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Сброс стандартных стилей изображений */
img {
  display: block; /* Убирает лишний пробел под изображением */
  max-width: 100%; /* Изображение не выходит за пределы родителя */
}

/* Сброс стандартных стилей якорей */
a {
  text-decoration: none; /* Убирает подчеркивание */
  color: inherit; /* Использует цвет родителя */
}

/* Сброс стандартных стилей форм */
button, input, select, textarea {
  margin: 0; /* Убирает стандартные отступы */
  padding: 0; /* Убирает стандартные внутренние отступы */
  border: none; /* Убирает стандартный бордер */
  background: none; /* Убирает стандартный фон */
  font: inherit; /* Наследует шрифт */
  color: inherit; /* Наследует цвет */
  cursor: pointer; /* Для элементов, которые могут быть нажаты */
}

button:focus, input:focus, select:focus, textarea:focus {
  outline: none; /* Убирает стандартную обводку при фокусе */
}

На практике часто используются готовые библиотеки CSS reset, такие как Normalize.css или Eric Meyer's CSS Reset, которые предлагают более комплексные и протестированные решения. Normalize.css, в отличие от традиционного reset, не полностью сбрасывает стили, а скорее нормализует их, сохраняя полезные стандартные стили и исправляя inconsistencies.