Зачем нужен normalize css

Что лучше — normalize.css или reset.css?

vladislav_boychenko

Они существуют для разных целей.
Normalize подстраивает стили всех дефолтных элементов под 1 стиль во всех браузерах, а Reset просто обнуляет все стили, типу отступов, бордеров и так далее.
Поэтому если вы хотите с нуля прописать все отступы всем 6-ти заголовкам, то выбирайте Reset, а если нет — то Normalize.

Ответ написан более трёх лет назад

Комментировать

Нравится 6 Комментировать

Зачем нужен normalize css

Подскажите как правильно в рамках бэм это сделать?

Возможно нужно как то переопределить блок page?

Имеется ввиду чтобы этот css скомпилировался в runtime css, а не подключался из link в head , вообщем это касается любого другого css файла

Комментарии: 16

Т.е. создается блок i-normalize, туда кладётся css из normalize.css и указывается в .b-page.deps.js.

А в каком месте в блоке b-page ты вставляеешь блок i-normalize ? где то в head?

Я не вставляю его отдельно в head, он собирается внутри common.css. А сам common.css уже подключается в head, да. За позицию кода в common.css отвечает порядок подключения блоков в b-page.deps.js, т.е. чем раньше укажешь зависимость i-normalize, тем выше по коду в CSS он будет.

Хотя я уже сомневаюсь что правильно понял вопрос.

Покажи пример bemjson в котором указано, что нужно подключить normalize.css

Смотри, в bemjson ты указываешь блок page. У блока page в зависимостях в page.deps.js указываешь блок i-normalize. В i-normalize ты указываешь в i-normalize.bemhtml что твой блок i-normalize должен цепляться к блоку page как элемент css:

block i-normalize, default: return apply(
this._mode = »,
this.ctx = block: ‘page’,
elem: ‘css’
>
);
>

И в итоге в итоговом css для бандла у тебя есть css-код из блока i-normalize.

Спасибо, вроде понял, попробую. С applyCtx получилось бы изящнее

Кстати, было бы логичнее как то универсально подключать css файл в runtime-ый css, пока не знаю как, хотя возможно это не совсем правильно в рамках бэм

Верю, но я пока что тоже учусь использовать bemhtml и данный кусок бездумно скопировал, посмотрел что работает и забыл Рефакторинг будет после выпуска первой вёрстки, сейчас главное чтобы работало.

А можно объяснить что есть «runtime css»? Моё решение не претендует на единственно верное, оно скорее первое заработавшее и основано на коде как минимум годичной давности.

Здесь шаблон вообще не нужен, просто укажите блок в зависимостях для b-page.

P.s. Вам не должно хотеться использовать нормализацию или сброс стилей, все необходимое для стилизации должно быть независимо в каждом блоке, а оптимизацией пусть занимаются роботы(csso в данном случае).

По поводу p.s согласен, normalize не вписывается в бэм, подумаю над этим на досуге. Просто привык, что он в каждом проекте подключался

runtime css имеется ввиду общий файл в который склеиваются все css блоков

все верно написал: для того, чтобы подключить какой-либо css-файл в сборку, его не нужно указывать в bemjson и никаких шаблонов ему тоже не нужно, достаточно добавить его в deps.js для какого-то блока, который точно окажется на странице (b-page — отличный вариант).

ну и в принципе всякие ресеты-нормалайзы — это не тру, хотя на вкус и цвет.

Сброс и нормализация стилей на CSS

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

Давайте посмотрим, какие подходы существуют для борьбы с указанной проблемой.

Сброс стилей через универсальный селектор

Распространенной практикой является отмена отступов по умолчанию. Для этого создают так называемый файл сброса стилей reset.css .

В этом файле сбрасывают все отступы в ноль, используя универсальный селектор:

Затем к HTML странице подключают сначала файл сброса, а затем уже файл с основными CSS стилями:

Создайте файл со сбросом через универсальный селектор. Подключите его к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Готовые библиотеки для сброса

Зачастую удобно сбрасывать не только отступы, но и другие значения по умолчанию. Существуют уже готовые файлы сброса, сбрасывающие все лишние значения. Одним из популярных является сброс стилей от Эрика Мейера:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table < border-collapse: collapse; border-spacing: 0; >

Подключите описанный сброс к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Нормализация стилей

Не обязательно сбрасывать все стили в ноль. Существует альтернативный подход, который называется . В этом подходе значения свойств не сбрасываются в ноль, а им указываются определенные значения, чтобы во всех браузерах стили по умолчанию были одинаковыми и удобными. Существуют готовые файлы со стилями нормализации, например, популярная библиотека normalize.css.

Подключите описанную библиотеку к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Сброс CSS стилей (CSS reset)

Задача сброса CSS стилей состоит в том, чтобы привести вид CSS в исходное состояние по умолчанию в разных браузерах. Для сброса CSS стилей в исходное состояние можно использовать так называемый «CSS reset» или «normalization». CSS reset является набором стилей, которые устанавливают базовые значения для различных элементов, чтобы обеспечить единообразное и предсказуемое начальное состояние стилей в разных браузерах. Мы часто используем сброс CSS стилей в разработке интернет-магазинов в Киеве.

Eric Meyer’s CSS Reset

Решение представлено meyerweb.com Eric Meyer v2.0.

Normalize.css

Более полный сброс CSS стилей для IE, iOS, Safari https://necolas.github.io/normalize.css

CSS / HTML
FrontEnd (ФронтЭнд)

Помогла ли вам статья?

361 раз уже помогла

Комментарии: (0) Написать комментарий

Зачем нужен normalize css

Что лучше — normalize.css или reset.css?

Зачем нужен normalize css

Сброс и нормализация стилей на CSS

Сброс стилей через универсальный селектор

Готовые библиотеки для сброса

Нормализация стилей

Сброс CSS стилей (CSS reset)

Eric Meyer’s CSS Reset

Normalize.css

КАТЕГОРИИ

Добавить комментарий Отменить ответ