PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Что такое CSS Reset?

Основы CSS

CSS Reset — набор стилей в начале проекта, который убирает различия стандартных стилей браузеров и задаёт удобную основу.

Зачем

У каждого браузера свои стили по умолчанию: отступы у body и h1, вид кнопок, поведение картинок. Без reset вёрстка выглядит по-разному в разных браузерах.

Что обычно входит

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
  • box-sizing: border-box — понятные размеры;
  • обнуление отступов, которые всё равно задаёт дизайн;
  • картинки не вылезают за контейнер;
  • поля форм наследуют шрифт страницы.

Подключение

Reset подключают первым, чтобы остальные стили его переопределяли; удобно положить его в нижний слой @layer reset.

Коротко для собеседования

CSS Reset выравнивает стандартные стили браузеров и задаёт удобную основу (border-box, без отступов, адекватные картинки и формы).

Подробнее: Josh Comeau — A Modern CSS Reset

Другие вопросы раздела