Что такое Reset CSS и зачем он нужен?

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

Зачем это нужно?

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

Как работает Reset CSS?

Файл Reset CSS обнуляет все стандартные отступы, границы, шрифты и другие свойства, которые браузеры добавляют по умолчанию. После этого можно применять собственные стили без риска, что что-то будет «ломаться» из-за базовых настроек браузера.

Примеры популярных reset-файлов: Eric Meyer’s Reset и Normalize.css.

Версия файла reset.css

/* Reset and base styles  */
* {
	padding: 0px;
	margin: 0px;
	border: none;
}

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

/* Links */

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

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

address {
  font-style: normal;
}

/* Form */

input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
	display: none;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
    outline: none;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}