Как подключить 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 — отличный вариант).
ну и в принципе всякие ресеты-нормалайзы — это не тру, хотя на вкус и цвет.
How to use normalize.css using npm install with webpack?
I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/). Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to?
24.2k 14 14 gold badges 88 88 silver badges 110 110 bronze badges
asked Feb 8, 2017 at 17:33
2,143 4 4 gold badges 19 19 silver badges 19 19 bronze badges
5 Answers 5
You can use the npm-installed normalize.css in the following way with React:
import React from 'react'; import ReactDOM from 'react-dom'; import 'normalize.css'; // Note this const root = document.getElementById('root'); ReactDOM.render(Hello, World!
, root); The result will be:
Notice that the text has been styled by normalize.css .
To get it working, you need something similar to the following setup:
1) Add the Javascript from above to index.js
2) Add normalize.css (and friends) to package.json :
< "dependencies": < "normalize.css": "^5.0.0", "react": "^16.3.2", "react-dom": "^16.3.2" >, "devDependencies": < "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.11", "style-loader": "^0.21.0", "webpack-dev-server": "^3.1.4", "webpack": "^4.8.3" >> 3) Use the correct loaders in webpack.config.js :
module.exports = < mode: 'development', module: < rules: [ < test: /\.js$/, loader: 'babel-loader', options: < presets: ['env', 'react'] >>, < test: /\.css$/, use: [< loader: 'style-loader' >, < loader: 'css-loader' >] > ] > >; 4) Add an index.html file to see the results:
4) Install everything
npm install 5) Start the Webpack devserver:
./node_modules/.bin/webpack-dev-server --open NOTE: I am using version 5.0.0 of normalize.css . If you use version 6.0.0 or higher, the font will be different. All the opinionated rules were removed from normalize.css in that version.
Update 17/5/2018: Updated to use Webpack 4 and React 16.
answered Feb 15, 2017 at 9:50
1,770 1 1 gold badge 13 13 silver badges 21 21 bronze badges
I’m a React n00b, and found this via Google. As of today, the normalize docs show you the command line for ‘npm install’, but don’t explicitly mention what the importable package name is (it differs from the install name), or how to utilize it after. therefore, I am very grateful for this answer. =)
Jul 7, 2017 at 6:26
I had to use import ‘normalize-css/normalize.css’ , just importing ‘normalize.css would look for it in the current directory
Jul 25, 2017 at 18:46
@GreyVugrin normalize-css is not the same as normalize.css . normalize-css has not been updated since 2014: github.com/chrisdickinson/normalize-css
Aug 2, 2017 at 9:30
Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.
@import "../node_modules/normalize.css/normalize.css"; module: < rules: [< test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader" ] >, < test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] >] >; answered Sep 1, 2018 at 17:14
Timber Hjellum Timber Hjellum
330 2 2 silver badges 7 7 bronze badges
This import is from inside another css file of course.. e.g. style.css
Jul 16, 2019 at 19:56
this may also be helpful for folks to resolve issues where — when prev using style-loader — styles were inserted into the head after imported styles, thus overriding custom styles with the defaults
Jul 23, 2019 at 22:51
@import "~normalize.css/normalize.css"; 5,205 2 2 gold badges 23 23 silver badges 40 40 bronze badges
answered Dec 28, 2020 at 5:32
41 1 1 bronze badge
Once you import or require it will be included by Webpack unless you set it not to. For example:
module: < rules: [ // from 'loaders' to 'rules' < test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, >, < test: /\.sass$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract(< fallbackLoader: 'style-loader', loader: ['style-loader','sass-loader'] >) > ] > The exclude property will take care of that.
// public/assets/style.scss @import 'substyle1'; @import 'substyle1'; body
// src/index.js -> entry file import '../public/assets/style.scss'; // Webpack will know that you are importing your SCSS / SASS file Hope this helps.
29.4k 11 11 gold badges 96 96 silver badges 132 132 bronze badges
answered Feb 9, 2017 at 8:07
1,993 1 1 gold badge 15 15 silver badges 14 14 bronze badges
Sorry but could you clarify where I would do the import or require ? And how would I be able to edit the normalize sheet?
Feb 9, 2017 at 17:08
Normally what I do is import or require it on my entry point usually index.js . Then webpack will take care of the rest. If you want to edit normalize sheet then you can do so as you would in a very simple project (directly editing the file itself)
Feb 10, 2017 at 3:07
Or in this case, since it’s a node package, you can create a new style.css and import it in your entry file to make it available to all of your components.
Feb 10, 2017 at 3:09
Do you mind showing an example of how style.css should be created? Would that be the style sheet that holds all the styles? And I’m using SCSS by the way.
Feb 14, 2017 at 17:15
I updated my answer with a very simple example. It does not matter how you create your css / scss / sass file as long as you import it in your entry file, webpack will be the one to handle that. As long as a module is required or imported.
Feb 15, 2017 at 0:12
First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
i.e Just put these downloaded files into the project folder and add link to it by link tag
link rel=»stylesheet» type=»text/css» href=»normalize.css»
NOTE href content should point to the folder where normalize is stored.
О 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 раздражает огромная цепочка наследования свойств, которая отображается в инструментах разработчика.
Такая проблема не возникает с 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. Любой желающий может сообщить о проблемах и предложить исправления. Полная история проекта доступна всем для просмотра, а в коммитах и тикетах находятся контекст и причины всех изменений.
Вся информация о стилях по умолчанию
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Зачем нужен нормализатор CSS
Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает.
Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:
- две горизонтальных линии-разделителя,
- поле ввода с текстом внутри,
- кнопку,
- текст со ссылкой.
А после этого посмотрим, как выглядит этот код в разных браузерах.
Делаем одинаково
Привет, это журнал «Код»! 
Почему так происходит
Несмотря на то что внутри многих разных браузеров стоят одинаковые движки, у каждой компании свои представления о прекрасном и о том, как отображать разные HTML-элементы и CSS-стили. Например, в разных браузерах могут отличаться:
- толщина линий обводки,
- радиус скругления,
- размер текста,
- внешние и внутренние отступы у элементов,
- правила оформления ссылок,
- формы и кнопки.
Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.
При этом браузер справится со своей основной задачей — показать HTML-страницу в понятном для пользователя виде. Но если веб-разработчик хочет, чтобы сайт выглядел идентично в каждом браузере, он должен предусмотреть это заранее и прописать в стилях.
Что такое нормализатор стилей
Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути, это просто большой CSS-файл, который делает следующее:
- стандартизирует все отступы;
- устанавливает единый размер шрифта;
- приводит к единому внешнему виду все формы, кнопки и элементы на странице;
- устанавливает для всех браузеров единые начальные параметры для форматирования текста, изображений и стандартных элементов.
Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.
Пример
Код ниже делает две вещи:
- Устанавливает одинаковую высоту строки во всех браузерах.
- Предотвращает изменения размера шрифта в iOS при повороте экрана.
html <
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
>
-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:
-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.
text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.
Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).
Как использовать
Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:
Ещё вариант — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.
Вот как будут выглядеть наши страницы после подключения нормализатора: