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

301

11 февраля 2017, 08:16

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

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

Answer 1

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

По умолчанию, в браузерах есть встроенные определения для HTML-элементов. Например, у <body> и <p> есть margin, у <ul> и <ol> есть 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;
}

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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

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