Как использовать normalize.css, а не reset.css при верстке сайтов с проработанным до мелочей дизайном?
В последнее время всё чаще слышу, что при верстке сайтов лучше использовать normalize.css, нежели reset.css. Это не вызывает никаких сомнений при разработке веб-приложений. Но как быть с сайтами, где дизайнером были отрисованы все заголовки, прописаны отступы, и пр.?
Очевидным недостатком normalize.css в данном контексте является то, что необходимо сбрасывать стандартные стили и прописывать те, что определены дизайнером. Например, меню. Взять тот же WordPress, который по умолчанию генерирует код меню как маркированный список. Приходится делать list-style: none, приводить к блочному виду и некоторые другие манипуляции. Еще один пример - стили, как известно, надо задавать классами, не используя теги и id. Как быть в ситуации, когда стили прописаны для div.classname (в css просто .classname), а завтра заказчик позовет seo-шников (ничего не имею против последних, но немного далек от seo, верстаю по семантике, которую подразумевает html5) и они расковыряют верстку внедрением свои "семантичных" h1.classname,h2.classname и пр. Верстка сломается.
Сейчас у меня работа поставлена следующим образом - в самом начале подключен reset.css, потом классами описана основная верстка сайта (это позволяет жонглировать тегами как угодно), затем идет класс .text, внутри которого описаны базовые теги со стилями, которые, опять же, предусмотрел дизайнер (все теги, которые могут быть сгенерированы редакторами, будь то CKEditor или любой другой). Задавая блоку класс .text мы говорим, что тут будет контент, который был оформлен в редакторе.
В итоге получается что при использовании normalize.css приходится делать гораздо больше работы при верстке "продуманных" макетов, нежели сбросив всё и прописав вручную.
Прошу помочь разобраться в целесообразности применения normalize.css в контексте данного вопроса.
Больше работы - так не используйте.
Основное назначение - создание идентичной начальной точки отсчёта стилей не зависимо от браузера, всё.
Если вам это не нужно - нет проблем.
e_s_l: Часто люди переопределяют только часть стилей, то есть они привыкли, что у параграфов отступы одни, у заголовков другие, у текстовых полей по-умолчанию белый фон и так далее.
Если у вас слишком детализированные стили, либо вы всё равно все эти стили сами будете переопределять - оно вам не нужно.
Назар Мокринский: Дизайнер он на то и дизайнер чтобы изображать сайт так, как видит. Этим нестандартным подходом и ценится его дизайн. Если дизайнер будет рисовать сайты "под bootstrap с учетом normalize" - грош-цена такому дизайнеру, если он не UI/UX. Меня интересует, верстают ли вообще с использованием normalize именно целые "дизайнерские" сайты (будь-то хоть сайт-визитка, хоть фронт интернет-магазина), или же использование noramlize заканчивается на веб-приложениях и "шаблонных" дизайнах.
e_s_l: Он не должен рисовать "под bootstrap", normalize просто дает единую точку отсчёта, не больше и не меньше. Не стоит наделять его магическими свойствами. Если вас это не интересует - вам он не нужен)
Назар Мокринский: Статья, в принципе, отвечает на мой вопрос. Да, я мог бы изменить normalize.css под себя. Но тогда это почти ничем не будет отличаться от reset.css + мои стили. В любом случае, спасибо за ответ, просто ввёлся в заблуждение другими статьями, утверждающими что лучше использовать normalize.css. Буду делать как привык, смысла что-то менять - нет.
e_s_l: лучше). просто в вашем случае вам выгоднее использовать ресет. лично я не использую ресет уже много лет - вместо этого просто имею несколько "чистых" классов для ресета стилей елементов.
хм. не совсем понимаю
вам с любом случае нужно с нуля прописывать все значения елементов
и какая разница или у вас изначальный ресет или уже присутствуют базовые стили?
в моем случае просто получается зачастую что в будущем кто либо что либо добавит (или это вообще кмс с своим редактором) и многие елементы просто вылезут - и полностью лишенные стилей - будут смотрется убого.
нормалайз решает проблему того что в большинстве браузеров все елементы будут более менее похоже отображатся. а верстаю я исключительно под хром не заглядывая в другие браузеры (я хороший верстальщик и работаю на большой фирме поэтому сразу предпреждаю крики "а вы попробуйте поработать когда бла бла бла")
+ нормалайз используется в некоторых гридовых и не только фреймворках. нормалайз. не ресет.
Oleksandr Riabokon: Спасибо за ответ, мне просто нужно было определиться с тем, что normalize это не то, за чем следует гнаться в контексте моего вопроса. Если кто-либо что-либо добавляет в макет - это изменение верстки и должно сопровождаться изменением/добавлением соответствующих стилей (опять же, в контексте заданного мной вопроса). Вот еще - "исключительно под хром" и "хороший верстальщик", извините, но я не могу совместить два этих словосочетания. Возможно, это связано с ограничениями в "большой фирме", либо с тем, что вы всё же говорите про веб-приложения в частности, а не веб-сайты, где кроссбраузерность дизайна играет главную роль, но проверять свою работу в других уважающих себя фирмах принято во всех браузерах. Это будет продолжаться до тех пор, пока браузеры не начнут работать на одном движке - в ближайшее время, думаю, не предвидится. Либо вы знаете все тонкости рендеринга популярных движков, и верстаете вслепую. Не пытаюсь усомниться в Вашей компетентности, просто не уловил, зачем Вы писали про хром и пр. Итак, зачем вообще использовать normalize или reset, если Вы верстаете исключительно под хром? Мне просто была не понятна концепция определения базовых стилей чтобы потом все их отменить/переопределить. С этим я разобрался. Мне это не нужно. Когда буду заниматься разработкой веб-приложения - буду использовать normalize. Пока останусь с reset для верстки сайтов.
e_s_l: вы правы отчасти. я больше занимаюсь веб приоложеними чем простыми сайтами. но в то же время хром ~= опера,сафари и почти равно фокс. ие не браузер.
да - мы делаем для корпоративных клиентов но ие - в последнюю очередь, как бы дико это не звучало ) (к тому же проверяю не я а тестеры) и даже если что то не так - все решается глобальными правками - а не использованиями хаков или отдельными таблицами стилей. не думаю что мне везет или я знаю все тонкости рендеринга - но вот как раз не обнуление а приведение отображения елементов в РАЗНЫХ бразуерах с единому стилю - вот оно помогает добится того что сайты смотрятся отлично в разных браузерах.
Oleksandr Riabokon: Да, в последнее время всё больше движки приходят к общему знаменателю, это радует. Касательно IE не соглашусь. Последние версии довольно неплохо проработаны и почти не отстают от "гигантов". Про отдельные таблицы стилей можно уже забыть, согласен. Но обсуждение этого всего уводит диалог в сторону. Я разобрался в вопросе применения normalize и reset.
- normalize - веб-приложения и шаблонные сайты;
- reset - сайты с проработанным дизайном.
И меня, в принципе, устраивает это.
e_s_l: я все таки не согласен
1. ресетим стили - получаем голые елементы и "разукрашиваем" ВСЕ елементы которые МОГУТ БЫТЬ.
2. нормалайзим - получаем "стандартные" елементы и все равно "разукрашиваем" ВСЕ елементы которые НУЖНЫ. остальные будут и так хорошо смотрется
по хорошему - просто пробегитесь по самому файлу нормалайза и поймете что 70% оттуда вам так или иначе придется написать самому - так как нормалайз не "разукрашивает" а делает фиксы которые влияют на поведение и отображение елементов а не на их внешний вид
Oleksandr Riabokon: Ваша точка зрения тоже имеет право на существование, но мне больше нравится концепция - сбрасываем всё в ноль, а поведение и стиль задаем сами, нежели, например, писать у каждой ссылки text-decoration: none. А прописать это в начале файла со стилями будет являться ничем иным, как reset.css.
Oleksandr Riabokon: Если normalize и reset делают в корне разные вещи, почему не использовать их одновременно, reset после noramlize? Тогда верстка будет на 100% кроссбраузерной, а стили можно будет определить самому. Или я ошибаюсь? Я смотрел код normalize. 50% из этого мне не приходится использовать, что-то есть в reset.css, остальное я бы добавил к своим проектам. Стандартизация не получилась, придется велосипедить. Короче, я еще больше запутался =)
Дефолты общего плана сложно предугадать - они всегда разные, а вот контентные блоки у меня кочуют из проекта в проект за исключением цветовой гаммы. Меня все устраивает, просто пытаюсь понять, нужно мне это или нет.
e_s_l: Ну тут за вас никто решение не примет. Тут дело даже уже не в целесообразности, а в привычке и в подходе к программированию. Я просто привык всегда начинать с подключения сброса Мейера и уже знаю, от чего я буду плясать и как все это будет выглядеть. Выбирая разные подходы к каждому новому проекту я бы просто терял время. А так я уже знаю все дефолты и дописать код или просто скопировать их из "кочующих" блоков — проще. Просто имея уже в голове какую-то шкалу с "нулями" по векторам намного проще понимать что и где менять, это занимает всегда меньше времени, чем принятие решения о типе стандартизации конкретного css. Если все в данный момент вас устраивает, то и менять подход не стоит. Особенно, если у вас часто бывает рефакторинг и ревизия старых проектов. Привычный код идет уже в мышечной памяти, а замена ресета на нормалайз — это шило на мыло и больше головной боли. ИМХО.
Простой
Средний
