Как подключить normalize css к html
Подскажите как правильно в рамках бэм это сделать?
Возможно нужно как то переопределить блок 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 — отличный вариант).
ну и в принципе всякие ресеты-нормалайзы — это не тру, хотя на вкус и цвет.
В чем разница между Normalize.css и Reset CSS?
Если вы когда-нибудь делали коммерческий заказ на верстку, то наверняка сталкивались с таким требованием как кроссбраузерность, то есть чтобы ваша страница отображалась максимально одинаково во всех браузерах. И поэтому возникает вопрос – что же выбрать, reset или normalize?
Что лучше reset.css или normalize.css?
Для начала давайте выясним что делает каждый из файлов:
reset.css – как и видно по названию файла, сбрасывает большинство стилей браузера, которые в нем заданы по умолчанию (а такие действительно есть, просто откройте голый HTML).
normalize.css – этот файл не только задает стили по умолчанию там где это необходимо, но и исправляет некоторые недостатки старых браузеров (привет IE).
Как вы понимаете, эти 2 файла даже не совсем корректно сравнивать, так как у них немного разная “философия”. Так в чем же разница и что выбрать?
В чем отличия normalize от reset css
- В отличие от reset, после подключения normalize css, вы визуально сможете определить где у вас находятся различные элементы, те же параграфы имеют внешние отступы. Поэтому, применяя “таблицу стилей со сбросом”, вы просто приведете большое количество элементов к одному виду.
- Исходя из 1 правила следует что нам нужно написать стили с нуля, т.к. у нас всё сброшено, что лично по мне, уже не комильфо.
- В normalize css есть исправления различных общих ошибок, таких как отображение HTML5 тегов или тех же форм
- Когда вы работаете с инструментами отладки в браузерах, таких, например, как фаербаг, подключая ресет вы получите огромную “простыню” из свойств, которая в итоге увеличит ваше время на написание новых стилей и поиск старых
- В normalize каждое отдельное правило задокументировано и вы легко сможете понять для чего оно там, и если вы уверены что оно вам не нужно, то сможете легко его удалить
- normalize.css подключен по умолчанию в bootstrap ��
Думаю вы и сами понимаете, что normalize выигрывает по всем параметрам. Стоит также вспомнить про извращенцев, которые используют что-то в этом стиле:
Как вы понимаете так делать не стоит.
В заключении хотелось бы сказать, что я еще не встречал человека, который бы утверждал что reset.css вообще есть смысл применять. Мне кажется, его применяли только потому что не знали про “нормализацию стилей” ��
Есть мнение, что стоит подключать стили в head “инлайново”, хотя бы для “первого экрана” – то есть то, что сразу покажет человеку когда он откроет ваш сайт, и это действительно очень хорошая практика. Данную рекомендацию вы можете встретить в google page speed.
Возможно вам пригодится – inline normalize css and bootstrap grid �� Пишем это в head, затем также само пишем свои стили для первого экрана, и вы выполните одну из рекомендаций + ваш сайт не будет шататься при загрузке, т.к. основные самые важные стили, а именно сетка, нормалайз и “первый экран” уже прогрузились.
Также вот вам версия без комментариев:
html body article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary audio, canvas, progress, video audio:not([controls]) [hidden], template a a:active, a:hover abbr[title] b, strong b, strong dfn h1 mark small sub, sup sup sub img svg:not(:root) figure hr pre code, kbd, pre, samp button, input, optgroup, select, textarea button button, select button, html input[type=»button»], input[type=»reset»], input[type=»submit»] button[disabled], html input[disabled] button::-moz-focus-inner, input::-moz-focus-inner button:-moz-focusring, input:-moz-focusring input input[type=»checkbox»], input[type=»radio»] input[type=»number»]::-webkit-inner-spin-button, input[type=»number»]::-webkit-outer-spin-button input[type=»search»] input[type=»search»]::-webkit-search-cancel-button, input[type=»search»]::-webkit-search-decoration fieldset legend textarea optgroup
Что такое reset.css и normalize.css
Сегодня мы рассмотрим что такое reset.css и normalize.css и для чего они нужны. Пренебрегать данными файлами стилей не следует, так как их отсутствие может серьёзно исказить внешний вид сайта на разных версиях браузеров.
Каждый начинающий верстальщик так или иначе сталкивается с проблемой кроссбраузерности (когда html страница по разному отображается на каждом из браузеров). Отличия могут быть как несущественные так и критические в следствии чего «плывёт» вся вёрстка. Данная статья не расскажет как решить все проблемы кроссбраузерности, речь пойдёт о файлах стилей reset.css и normalize.css.
Разработчики браузеров сами решают каким образом оформлять тот или иной элемент страницы, будь то заголовок (h1), список (ul) и т.д. Разница может заключаться в значениях отступов (margin, padding), размерах шрифтов и прочем. Также каждый пользователь может настроить свой браузер под себя, то есть сделать первоначальные установки по шрифтам или, что ещё хуже, фонам. Это влечёт за собой следующий не мало важный момент — например если пользователь поменял цвет фона на красный, а верстальщик не переопределил значение для фона страницы, то у пользователя будет свой «уникальный» дизайн. От верстальщика требуется чтобы сайт отображался одинаково (или приближённо) вне зависимости от браузера клиента, а для этого требуется переопределять все значения элементов не смотря, что его браузер уже имеет белый фон.
Reset.css
Идея о создании данного набора файлов стилей пришла в голову Эрику Майеру. Идея reset.css проста — перечислить все возможные теги и сбросить для них стили в нулевые значения. Остаётся лишь подключить данный файл к странице как обычный файл стилей.
Существует ещё одна вариация сброса:
1 2 3 4
* { margin: 0; padding: 0; }
Недостатком сброса стилей является необходимость повторно задавать стили для элементов (переопределять сброшенные значения).
Normalize.css
Автор данного подхода Николас Галлахер
Normalize.css — не сбрасывает стили для элементов, а нормализует (стандартизирует), что избавляет от необходимости переопределять повторно все стили.
Заключение:
Популярны оба файла и в своей практике можно использовать любой из них. Бывают случаи когда приходится на основе этих файлов создать один свой, который объединяет оба эти подхода. Ещё одним решением, которое избавляет нас от необходимости использования сброса и нормализации стилей — это использование CSS-фреймворков, которые в себе уже содержат сборку из этих файлов.
@import normalize.css в scss
работаю с gulp поставил модуль normalize.css хочу его стили импортировать в scss если импортировать по типу:
@import «../../../../node_modules/normalize.css/normalize»;
то стили применяются но в логе есть предупреждение:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass. Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
проблема исчезает если переименовать расширение файла в .scss, но это плохой вариант. Далее, можно указать непосредственно что файл является .css, в таком случае стили не применяются и в браузере есть ошибка о том что файл:
Refused to apply style from because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.