Сброс CSS стилей. Reset CSS

На чтение 3 мин Просмотров 95.6к. Опубликовано 01.03.2022

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

Первый подход делать полный сброс стилей. Первым решением стал файл rest.css от mayerweb.

Второй подход, вместо полного сброса — приводить все единому виду. Первым популярным решением стал файл normalize.css от necolas.

Что выбрать, полный сброс или нормализацию? Все зависит от ваших задач. Взвесив все за и против, попробовав разные варианты, я пришел к решению полного сброса стилей. Это гораздо удобнее и экономит время при переопределении новых свойств.

За годы практики я выработал собственный вариант файла reset.css который рекомендую и использую сам. Ниже вы сможете увидеть его код. Возможно со временем он будет изменяться и правится. Но на текущем этапе это отличное решение для сброса стилей для HTML CSS верстки нового проекта.

Файл rest.css версия от ВебКадеми:
(обновлено 17.05.2023)

/* 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;
}