Reset CSS: краткий сброс стилей

Development | Amber | Комментировать запись

Правила сброса стилей CSS не должны быть километровыми. Кроме того, большинство современных браузеров поддерживают довольно единообразный базовый макет. Ниже мы приводим простой и эффективный на наш взгляд сброс стилей. Чтобы он начал работать, просто скопируйте его в свой новый проект.

html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

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

Чуть подробнее о сбросе стилей можно почитать здесь.

Давайте подробнее рассмотрим весь приведенный выше фрагмент.

Как видите, этот подход содержит правило, согласно которому изображения по умолчанию будут реагировать на действия пользователей.

Возможно, наиболее важной частью этого сброса CSS является box-sizing: border-box – именно эта часть обеспечит установку согласованных и предсказуемых размером. Значение по умолчанию для content-box не учитывает отступы и границы.

Если вы хотите сохранить стандартные маркеры для своих списков, можете удалить правило для ol и ul.

Что касается размеров шрифта: по умолчанию обычные заголовки не выделяются жирным шрифтом. Удалите это правило, если вам подходит стиль по умолчанию.

Согласно этому набору правил, размер шрифта по умолчанию равен 16px. Все остальное можно указать в единицах rem, и тогда все элементы будут отстраиваться согласно этим 16px. Если вы хотите глобально изменить настройку и сделать текст в целом немного больше, вы можете изменить базовое значение на 17 или 18px.

Читайте также: Как предотвратить разрывы строк в CSS