Обнуление CSS стилей (02.03.22)
Пример моих обнуляющих стилей с учетом разметки страницы с использованием обертки (wrapper), имеющей значение display: flex:
/* box-sizing */
html {
min-height: 100vh;
box-sizing: border-box;
font-size: 100%;
}
/* они уже наследуют свойство box-sizing у html (для сторонних компонентов важно!) */
*,
*:before,
*:after {
box-sizing: inherit;
}
/* плавная прокрутка по странице, работает не везде! */
html:focus-within {
scroll-behavior: smooth;
}
/* ссылки убираются почти всег */
a {
color: inherit;
text-decoration: none;
}
/* html5 семантические теги */
nav,
menu,
header,
footer,
aside,
article,
section,
aside,
figure,
figcaption {
display: block;
}
/* теги форм наследуют шрифты сайта*/
input,
textarea,
button {
font-family: inherit;
}
/* стили маркированных списков */
ul li {
list-style: none;
}
/* адаптив дял картинок, чтобы не вылезали за родителя */
img,
picture {
max-width: 100%;
}
/* шаблон для body */
body {
min-height: 100vh;
margin: 0;
font-family: "font", sans-serif;
font-size: 1rem;
color: #000;
line-height: 1.67;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}