Что такое CSS Reset?

CSS Reset — это набор правил CSS, предназначенный для установки единообразных базовых стилей для всех элементов HTML по умолчанию, преодолевая различия в стандартных стилях браузеров. Это помогает обеспечить более предсказуемое и кроссбраузерное отображение веб-страниц.

Основные цели CSS Reset:

• Удаление или обнуление стандартных отступов (margin, padding) и границ.
• Сброс стандартных размеров шрифтов и межстрочных интервалов для заголовков, параграфов и т.д.
• Единообразное оформление списков (ul, ol).
• Сброс стилей для таблиц, форм, изображений и других элементов.

Пример базового CSS Reset:

/*
   CSS Reset:  Сбрасывает стандартные стили браузеров
   для обеспечения единообразного базового вида элементов.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Включаем padding и border в общую ширину/высоту элемента */
}

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; /* Перенос длинных слов */
}

Существуют различные варианты CSS Reset, например, Eric Meyer's Reset CSS или Normalize.css. Normalize.css, в отличие от полного сброса, сохраняет полезные стандартные стили, исправляя только те, которые вызывают проблемы совместимости. Выбор между ними зависит от проекта и предпочтений разработчика.