Какие стили лучше задавать по умолчанию?

#css #вёрстка

При просмотре туториалов, связанных с версткой заметил, что часто перед началом работы,
авторы задают какие-то стили по умолчанию, переопределяют дефолтные стили браузера.
Собственно, возникло пару вопросов по этому поводу:


Зачем это делается?
Стили каких элементов лучше переопределить в самом начале?
Где можно об этом почитать поподробнее и найти код? Гуггл мне не очень помог, каюсь,
может плохо гугглил.

    

Ответы

Ответ 1

Зачем это делается?

По умолчанию, в браузерах есть встроенные определения для HTML-элементов. Например,
у  и 
 есть margin, у 
 и 
 есть padding и list-style, ну и так далее.
В каждом браузере эти предустановленные значения могут быть разными, соответственно,
normalize.css или reset.css нужны для того, чтобы стартовать с одинаковой базы. Различие
их состоит в том, что normalize.css приводит все элементы к одинаковому стилю, а reset.css
сбрасывает всё полностью в ноль. Лично мне больше нравится использовать reset.css,
потому что, как правило, все элементы потом всё равно переопределяются и для каждого
проекта формируется некое подобие UI kit. Но если вы верстаете страницу без формирования
определения всех элементов, то, возможно, вам подойдет normalize.css — так вам не надо
будет задавать отступы между параграфами и заголовками, переопределять списки и т. д.

Стили каких элементов лучше переопределить в самом начале?

Тут всё упирается в то, какую стратегию вы выбрали :) Мой необходимый набор:

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


Где можно об этом почитать поподробнее и найти код?

Хорошая статья на HTML-академии и на Хабре.

Код: reset.css, normalize.css.

P.S. reset будущего будет выглядеть примерно так:

* {
  all: unset;
}

head {
  display: none;
}


Ответ 2

Есть два основных подхода - reset.css и normalize.css. Остальное - в google.com


Ответ 3

html, body
{
  margin: 0;
  padding: 0;
}


Остальное - ручки)


Ответ 4

Делается для того, чтобы у всех браузеров привести дефолтные стили к какому-то номиналу,
и получить более ожидаемое поведение от элементов на странице и не было всевозможных
"призрачных" отступов в каком-нибудь фаерфоксе, и корректного отображения в хроме(например).  
Переопределяются в основном ссылки, списки, отступы внутренние и внешние у body,
div'a, поля ввода, по большому счету, все, что используется в проекте, по хорошему
необходимо "обнулить".
Гугли всевозможные reset.css. 




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


Немного советов:


Сброс стилей - отдельным файлом, включаемым в документ в самом начале.
Лучше индивидуальным элементам расписывать сбросы стилей отдельно, дабы достичь максимального
контроля над внешним видом страницы. Из минусов - разве что, что-нибудь забыть.
Сброс не обязательно приводить к нулевым значениям, можно сразу указать те, что по
дефолту будут использоваться в Вашем проекте.


Написанное выше является выдержкой из статьи с хабра, отсюда, .


Ответ 5

Используйте normalize.css популярная и проверенная библиотека для нормализации стилей
в разных браузерах. А дальше используйте сброс(задавать по умолчанию) стилей по вашему
вкусу.