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

Если вы когда-нибудь делали коммерческий заказ на верстку, то наверняка сталкивались с таким требованием как кроссбраузерность, то есть чтобы ваша страница отображалась максимально одинаково во всех браузерах. И поэтому возникает вопрос — что же выбрать, reset или normalize?

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

Для начала давайте выясним что делает каждый из файлов:

reset.css — как и видно по названию файла, сбрасывает большинство стилей браузера, которые в нем заданы по умолчанию (а такие действительно есть, просто откройте голый HTML).

normalize.css — этот файл не только задает стили по умолчанию там где это необходимо, но и исправляет некоторые недостатки старых браузеров (привет IE).

Как вы понимаете, эти 2 файла даже не совсем корректно сравнивать, так как у них немного разная «философия». Так в чем же разница и что выбрать?

В чем отличия normalize от reset css

  1. В отличие от reset, после подключения normalize css, вы визуально сможете определить где у вас находятся различные элементы, те же параграфы имеют внешние отступы. Поэтому, применяя «таблицу стилей со сбросом», вы просто приведете большое количество элементов к одному виду.
  2. Исходя из 1 правила следует что нам нужно написать стили с нуля, т.к. у нас всё сброшено, что лично по мне, уже не комильфо.
  3. В normalize css есть исправления различных общих ошибок, таких как отображение HTML5 тегов или тех же форм
  4. Когда вы работаете с инструментами отладки в браузерах, таких, например, как фаербаг, подключая ресет вы получите огромную «простыню» из свойств, которая в итоге увеличит ваше время на написание новых стилей и поиск старых
  5. В normalize каждое отдельное правило задокументировано и вы легко сможете понять для чего оно там, и если вы уверены что оно вам не нужно, то сможете легко его удалить
  6. normalize.css подключен по умолчанию в bootstrap 🙂

Думаю вы и сами понимаете, что normalize выигрывает по всем параметрам. Стоит также вспомнить про извращенцев, которые используют что-то в этом стиле:

Как вы понимаете так делать не стоит.

В заключении хотелось бы сказать, что я еще не встречал человека, который бы утверждал что reset.css вообще есть смысл применять. Мне кажется, его применяли только потому что не знали про «нормализацию стилей» 🙂

Есть мнение, что стоит подключать стили в head «инлайново», хотя бы для «первого экрана» — то есть то, что сразу покажет человеку когда он откроет ваш сайт, и это действительно очень хорошая практика. Данную рекомендацию вы можете встретить в google page speed.

Возможно вам пригодится — inline normalize css and bootstrap grid 🙂 Пишем это в head, затем также само пишем свои стили для первого экрана, и вы выполните одну из рекомендаций + ваш сайт не будет шататься при загрузке, т.к. основные самые важные стили, а именно сетка, нормалайз и «первый экран» уже прогрузились.

Также вот вам версия без комментариев:

 

Ознакомится с оригиналом normalize.css вы можете на гитхабе.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

  1. Палка о двух концах.
    Ресет сбрасывает стили всех браузеров, включая и старых. Это полностью устраняет все их причуды. После это можно нормализовать часть стилей файлом нормализе, а часть руками. Нормализе облегчает написание кода. Но, использовать только один этот файл, я считаю не творческим подходом, это раз, а во вторых — непрофессиональным. Нормализе не решает проблему с ИЕ. Для этого, даже разработчики вордпресс используют скрипты в дефолтных темах. Настолько проблематичны эти браузеры. Никакой нормализе этой проблемы не решит.

    1. В современных браузерах все эти проблемы к счастью пофиксили (по крайней мере большинство из них), а вот ИЕ уже ничего не исправит, особенно старые версии 🙂 Если почитать насколько он отличался раньше от всемирных стандартов, причем не только по тому как должен работать HTML, CSS но и JavaScript в том числе. Спасибо за конструктивный комментарий)

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

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