В чем разница между Normalize.css и Reset CSS?

565

Я знаю, что такое CSS Reset, но недавно я услышал об этой новой вещи под названием Normalize.css

В чем разница между Normalize.css и Reset CSS ?

В чем разница между нормализацией CSS и сбросом CSS?

Это просто новое модное слово для CSS Reset?

css  normalize-css 
— Джитендра Вьяс
источник

Ответы:

800

Я работаю на normalize.css.

Основными отличиями являются:

  1. Normalize.css сохраняет полезные значения по умолчанию, а не "стирает" все. Например, такие элементы, как supили sub«просто работают» после включения normalize.css (и на самом деле сделаны более надежными), тогда как они визуально неотличимы от обычного текста после включения reset.css. Таким образом, normalize.css не навязывает вам визуальную отправную точку (однородность). Это может быть не всем по вкусу. Лучше всего поэкспериментировать с обоими и посмотреть, какие гели с вашими предпочтениями.

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

  3. Normalize.css не загромождает ваши инструменты разработки. Общим раздражением при использовании reset.css является большая цепочка наследования, которая отображается в инструментах отладки CSS браузера. Это не такая проблема с normalize.css из-за целевых стилей.

  4. Normalize.css является более модульным. Проект разбит на относительно независимые разделы, что позволяет вам легко удалять разделы (например, нормализации форм), если вы знаете, что они никогда не понадобятся вашему веб-сайту.

  5. Normalize.css имеет лучшую документацию. Код normalize.css документирован как inline, так и более подробно в GitHub Wiki . Это означает, что вы можете узнать, что делает каждая строка кода, почему она была включена, каковы различия между браузерами, и легче выполнять собственные тесты. Цель проекта - помочь людям узнать, как браузеры отображают элементы по умолчанию, и облегчить им участие в представлении улучшений.

Я написал более подробно об этом в статье о normalize.css

— necolas
источник
19
Довольно часто вы не оставляете их на нуле (при использовании перезагрузки), поэтому вы на самом деле пишете меньше кода. Если вы хотите обнулить некоторые значения, тогда этот стиль связан с элементом, для которого он предназначен, и должен облегчить отладку.
— Неколас
8
И это серьезная проблема со многими перезагрузками, включая тот факт, что обнуление всего также замедляет работу браузера.
— Роб
4
И это также является преимуществом сброса - нормализуйте пропущенные проблемы с размерами, как это: github.com/yahoo/pure/issues/395
— Даниэль Соколовский
4
Я пропускаю момент, когда думаю, что, да, обычно вы не хотите, чтобы отступы и поля были равны нулю, но, нет, вы тоже не хотите использовать значение по умолчанию?
— Guioconnor
9
Лично я ушел нормализовать, хотя я все еще использую это. Многие пункты здесь действительно преувеличены (лучшая документация ...?). Нормализм является самоуверенным, поэтому он навязывает вам визуальную отправную точку (несмотря на то, что говорит этот ответ). Это также может устареть. Reset.css никогда не может устареть после его использования. И вы, скорее всего, захотите, чтобы поля и отступы были равны 0, чем любое другое число, о котором вы только можете подумать, поэтому на самом деле полезно, чтобы все сбрасывалось при разработке. Однако нормализация хороша для проблем с браузером, и это главная причина, по которой я ее использую.
— Чак Ле Батт
255

Основное отличие состоит в том, что:

  • Сброс CSS направлен на удаление всех встроенных стилей браузера. Стандартные элементы, такие как H1-6, p, strong, em и т. Д., В конечном итоге выглядят совершенно одинаково, без какого-либо украшения. Затем вы должны добавить все украшения самостоятельно.

  • Целью нормализации CSS является обеспечение согласованности стилей встроенного браузера для всех браузеров. Такие элементы, как H1-6, будут выделены жирным шрифтом, большими и так далее в разных браузерах. Затем вы должны добавить только разницу в оформлении вашего дизайна.

Если ваш дизайн a) следует общим соглашениям для типографики и так далее, и b) Normalize.css работает для вашей целевой аудитории, то использование Normalize.CSS вместо сброса CSS сделает ваш собственный CSS меньше и быстрее писать.

— Джеспер М
источник
6
@Jitendra Vyas: - на самом деле есть только один способ: прочитать хорошо прокомментированный код Normalize.CSS и решить, подходит ли он для ваших нужд или нет. github.com/necolas/normalize.css/blob/master/normalize.css
— Джеспер М
Еще одно замечание: Normalize.css стремится быть как можно более ненавязчивым, что позволяет разработчику легче писать свой код без необходимости бороться с конфликтами специфичности.
— zzzzBov
так скажем, я хочу использовать сброс при разработке. И как только я сделаю это, я захочу normalize.css или какой-нибудь JS, который принимает все то, что я не изменил, и то же самое в браузере. Или я изменился, и после изменения они стали такими же, как в браузере, и удалили их на стороне клиента. Таким образом, сброс помог бы при разработке этой «программы» на более быстрой стороне клиента. Оба счастливы. И гораздо умнее жить.
— Мухаммед Умер
На практике вы все равно перезапишете все стили Normalize. Теория великолепна, но в этом мире OOCSS она никогда не работает таким образом на практике.
— Чак Ле Батт
40

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

Я использую оба.

Некоторые стили из Reset, некоторые из Normalize.css. Например, из Normalize.css есть стиль, который гарантирует, что все элементы ввода имеют одинаковый шрифт, чего не происходит (между вводом текста и текстовыми областями). Сброс не имеет такого стиля, поэтому входные данные имеют разные шрифты, которые обычно не нужны.

Таким образом, в сущности, использование двух CSS-файлов лучше справляется с «выравниванием» всего;)

С уважением!

— ricmetalster
источник
1
Это хороший, прагматичный ответ. Это не обязательно один или другой. Бери что хочешь от каждого. Мне нравится полный сброс, но Нормализатор предлагает несколько хороших кусочков, которые хорошо работают поверх.
— Undistraction
3
@ricmetalster, поэтому вам пришлось переписать свой собственный CSS, чтобы объединить функции из reset.css и normalize.css?
— ayjay
2
Если вы хотите использовать оба варианта, можете ли вы сначала перечислить «сброс», затем «нормализовать», а затем добавить свои стили сверху?
— Крейг
Я использую подход «не переусердствуй», использую оба и вызываю их как включенные в мой импорт SASS @import '_normalize' && '_reset'
— killscreen
6

Первая reset.css- худшая библиотека, которую вы можете использовать, потому что она удаляет стандартную структуру HTML и отображает все, что вы пишете, в виде текста, после назначения значений отступов полей и других атрибутов 0. Так, например, вы найдете, что <H1>будет так же, как <H6>.

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

— N.Elsayed
источник
1
Зависит от вашего варианта использования. Учитывая ваш пример, если мне нужно изменить стили шрифта всех тегов заголовка для моего проекта, я не буду использовать значения по умолчанию, не так ли? Не следует маркировать библиотеку как «худшую» только потому, что нельзя найти применение в собственных проектах.
— Дебоджоти Гош
Одной из основных целей перезагрузки является борьба с проблемами, возникающими из стилей, применяемых браузером, что очень полезно. Я также думаю, что это не следует считать библиотекой.
— Исаак Пак
@gdebojyoti Есть несколько вариантов использования, но я очень редко хочу, чтобы все мои заголовки были одинакового размера, независимо от их соответствующих стилей шрифта.
— Джеймс Бенингер
5

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

Сохраняет полезные значения по умолчанию, в отличие от многих сбросов CSS.

— DBB
источник
Так что лучше использовать Normalize css over Reset?
— Джитендра Вьяс
3
@ Джитендра Вьяс - нет. Инструменты разные, не лучше и не хуже друг друга. Выберите тот, который поможет вам решить проблемы, которые у вас есть лучше всего.
— Квентин
8
Я бы утверждать , что нормализация это лучше , чем сбросить. Это приведет к менее CSS передаются по проводам, более эффективное использование UA по умолчанию, и лучшего понимания того , как элементы предназначены для отображения.
— Райан Кинал
5

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

— user3170099
источник
Это превышает 99% случаев использования.
— Майкл
@ Майкл какой? сбросить или нормализовать? (Просто пытаюсь понять мнение людей по этому вопросу)
— Брен
1
@ Брен сбрасывает и нормализует. Знание значений CSS по умолчанию для каждого элемента является частью хорошего внешнего интерфейса. Я вижу их как методы грубой силы, которые не нужны.
— Майкл
4
@Michael> Knowing the default CSS values for each element is part of being a good front end developer- это похоже на то, что вы предпочитаете работать с электронами, а не с языком программирования, потому что это то, что делает хорошего разработчика. Использование инструментов эффективно делает кому -то разработчику хорошо, наоборот , как правило , попадает в категорию времени тратить фанатиков
— nicholaswmin
1

Иногда лучшее решение - использовать оба. Иногда это не использовать ни один. И иногда это использовать один или другой. Если вы хотите, чтобы все стили, в том числе сброс полей и отступов во всех браузерах, использовали reset.css. Тогда примените все художественные оформления и стили самостоятельно. Если вам просто нравятся встроенные стили, но вы хотите больше межбраузерной синхронизации, то есть нормализации, тогда используйте normalize.css. Но если вы решите использовать и reset.css, и normalize.css, сначала свяжите таблицу стилей reset.css, а затем (сразу) таблицу стилей normalize.css (сразу). Иногда дело не в том, какой из них лучше, а в том, когда использовать какой, а когда использовать оба, а когда нет. ИМХО.

— Шон Танк Гарви
источник
0

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

  • Normalize.css - как следует из названия, он нормализует стили в браузерах для своих пользовательских агентов, то есть делает их одинаковыми во всех браузерах по той причине, что по умолчанию они немного отличаются.

Пример : <h1>тег внутри <section>Google Chrome по умолчанию будет меньше, чем «ожидаемый» размер <h1>тега. Microsoft Edge, с другой стороны, создает «ожидаемый» размер <h1>тега. Normalize.css сделает это согласованным.

Текущее состояние : репозиторий npm показывает, что в настоящее время пакет normalize.css загружается более 500 тыс. Раз в неделю. Звезды GitHub в проекте хранилища более 36к.

  • Сброс CSS - как следует из названия, он сбрасывает все стили, то есть удаляет все стили пользовательского агента браузера.

Пример : это будет делать что-то подобное ниже:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Текущий статус : он гораздо менее популярен, чем Normalize.css, пакет reset-css показывает, что его загрузка составляет около 26 тыс. В неделю. Звезд GitHub всего 200, как это можно заметить из репозитория проекта .

— Даниил Даниелецкий
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.