Как подключить normalize css
Перейти к содержимому

Как подключить normalize css

  • автор:

Как подключить 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 — отличный вариант).

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

Подключение normalize.css c помощью gulp?

Прошу помощи пожалуйста расскажите подробно как мне подключить в уже имеющийся gulpfile nozmalize.css. Через npm его установил но не могу разобраться какие изменения добавить в gulpfile для того чтобы все заработало. И если любой другой плагин захочу подключить как это сделать?

const gulp = require('gulp'); const sass = require('gulp-sass'); const browserSync = require('browser-sync').create(); function style() < return gulp.src('./scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')) .pipe(browserSync.stream()) >function watch() < browserSync.init(< server: < baseDir: './' >>) gulp.watch('./scss/**/*scss', style); gulp.watch('./*.html').on('change', browserSync.reload); > exports.style = style; exports.watch = watch;
  • Вопрос задан более трёх лет назад
  • 2198 просмотров

3 комментария

Простой 3 комментария

О normalize.css

Это перевод статьи Николаса Галахера — «About normalize.css».

Это перевод статьи Николаса Галахера — «About normalize.css»

Normalize.css — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это современная, готовая к HTML5 альтернатива традиционному reset.css.

  • Normalize.css — сайт проекта
  • Normalize.css — исходный код на GitHub

В настоящее время normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других фреймворках, инструментах и сайтах.

Обзор

Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, @necolas и Джонатан Нил, @jon_neal.

  • сохранять полезные настройки браузера, а не стирать их;
  • нормализовать стили для широкого круга HTML-элементов;
  • корректировать ошибки и основные несоответствия браузера;
  • совершенствовать юзабилити незаметными улучшениями;
  • объяснять код, используя комментарии и детальную документацию.

Он поддерживает широкий диапазон браузеров (в том числе мобильных) и включает в себя CSS, который нормализует HTML5-элементы, типографику, списки, встраиваемый контент, формы и таблицы.

Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.

Нормализовать или сбрасывать?

Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.

Normalize.css сохраняет полезные настройки по умолчанию

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

Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.

Normalize.css исправляет популярные ошибки

Он исправляет основные баги на мобильных и десктопных устройствах, которые не затрагивает reset.css. Это включает в себя параметры отображения элементов HTML5, исправление font-size для предварительно отформатированного текста, отображение SVG в IE9, и многие другие баги, связанные с отображаемым в разных браузерах и операционных системах.

Например, вот как normalize.css делает HTML5-элемент формы с типом search кроссбраузерным и стилизованным.

/** * 1. Переопределяет свойство `appearance`, заменяет `searchfield` в Safari и Chrome. * 2. Переопределяет свойство `box-sizing`, заменяет `border-box` в Safari и Chrome. */ input[type="search"] < -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ >/** * Убирает внутренний отступ и кнопку очистки строки поиска в Safari и Chrome в OS X */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration

Reset.css часто не приводит браузеры к тому уровню, где отправной точкой считается то, как элемент отрисовывается. Это особенно верно в отношении форм — именно здесь normalize.css может существенно помочь.

Normalize.css не мешает вашим инструментам отладки

Обычно при использовании reset.css раздражает огромная цепочка наследования свойств, которая отображается в инструментах разработчика.

Частый вид окна инструментов разработчика браузера при использовании reset.css

Такая проблема не возникает с normalize.css из-за целенаправленных стилей и умеренного использования множественных селекторов в наборе правил.

Normalize.css модульный

Проект разбит на относительно независимые участки, что позволяет увидеть, каким именно элементам нужны конкретные стили. Кроме того, это даёт вам возможность удалить блоки свойств (например, нормализацию форм), если известно, что они никогда не понадобятся на сайте.

Normalize.css имеет подробную документацию

Код normalize.css основан на детальном кроссбраузерном методичном тестировании. Подробно документированный файл вы можете найти на GitHub. Это значит, что вы можете узнать, что делает каждая строка кода, зачем она добавлена, какие различия существуют между браузерами. Также вы легко можете провести собственные тесты.

Цель проекта — показать людям, как по умолчанию браузеры отображают элементы, и помочь им упростить процесс внедрения улучшений.

Как использовать normalize.css

Сперва установите или скачайте normalize.css с GitHub. Есть два способа как можно его использовать.

Первый способ: используйте normalize.css как отправную точку CSS для вашего собственного проекта, изменяя значения согласно требованиям дизайна.

Второй способ: используйте normalize.css нетронутым и, основываясь на нём, переопределяйте стили в своём CSS при необходимости.

Заключение

Normalize.css значительно отличается от reset.css. Стоит попробовать его, чтобы увидеть, соответствует ли он вашему подходу и предпочтениям в разработке.

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

Вся информация о стилях по умолчанию

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

@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.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *