reset.css файл, кто какой использует, плюсы\минусы?

[anvyd]

Все (ну или почти все) используют какой то *css файл для сброса стилей или приведения их к одинаковым на всех браузерах.
Подскажите какой вы используете.
У меня есть файл сброса стилей, что можете сказать по нему, я не специалист, уверен, тут есть ляпы или чего-то не хватает, пожалуйста владеющие темой сделайте замечания.
гугл много чего подсказывает, и, например, первый в выдаче идет reset.css Eric Meyer от января 2011 года, подозреваю, что он весьма устарел

html{  box-sizing: border-box;}*, *:before, *:after{  box-sizing: inherit;}html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, main, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{	display: block;}body{	line-height: 1;}ol,ul{	list-style: none;}blockquote,q{	quotes: none;}blockquote:before,blockquote:after,q:before,q:after{	content: '';	content: none;}table{	border-collapse: collapse;	border-spacing: 0;}img,embed,object,video{	border: none;	max-width: 100%;}a{	text-decoration: none;}input,button{	font: inherit;	border-radius: none;	box-shadow: none;	appearance: none;}textarea:focus, input:focus{	outline: none;}button{	cursor: pointer;}

[lexxcode]

Прошу прощения, но тогда что вы посоветуете? Как мне убрать все отступы и лишние стили устанавливаемые браузером? Какая альтернатива вообще?

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

Ко мне понимание этого тоже пришло не сразу, но тем не менее. 

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

[wwt]

https://necolas.github.io/normalize.css/

[lexxcode]

Ресеты - зло

 

оспаде как же я устал это всем писать

[IvanRu08]

Ресеты - зло

 

оспаде как же я устал это всем писать

Почему зло? Я использую normalize и проблем не вижу

[lexxcode]

Эта тема на форуме поднималась тысячу раз, можете поискать. Было достаточно дескусий.

[psywalker]

Ресеты - зло

 

оспаде как же я устал это всем писать

 

Эх, а мне помогал когда-то...

[anvyd]

Ресеты - зло

 

оспаде как же я устал это всем писать

Прошу прощения, но тогда что вы посоветуете?

Как мне убрать все отступы и лишние стили устанавливаемые браузером?

Какая альтернатива вообще?

[wwt]

Прошу прощения, но тогда что вы посоветуете? Как мне убрать все отступы и лишние стили устанавливаемые браузером? Какая альтернатива вообще?

 

Сделать все своими стилями только там где это необходимо. 

[antonKar]

любезно предоставлено браузером

ага, особенно на iOS кнопки и подстветка у инпутов

[coolhtml]

Встань на свой путь и никого не слушай. Мне normalize.css надстроенный под проекты необходим как воздух.

[wwt]

Встань на свой путь и никого не слушай. Мне normalize.css надстроенный под проекты необходим как воздух.

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

[antonKar]

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

 

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

 

В общем я придумал: отказываюсь от своего симбиоза reset и normalize, больше их не использую, отдельно выделяю этот момент жирным текстом в резюме и отправляю резюме, например, в Яндекс на должность тим-лида. Уверен, что пройду без собеседования. 

[coolhtml]

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

Это потому что тебе alezriz сказал, с какого то форума русского? Думайте своей головой, мастера. Меня убедить ты точно не сможешь в своей глупости. Вот таких как тс жалко, они считают вас примером для подражательства. 

Edited August 15, 2015 by coolhtml

[coolhtml]

Вкусно покушал и решил добавить.

 

ткрою секрет (еще раз) тебе не нужно убирать все отступы и лишних стилей браузер не устанавливает. Как только придет понимание этого факта, любые ресеты станут не нужны.  

 

 

У нас у русских, у всех абстрактные контуры являются критерием опыта? 

У меня есть androide, windows phone, iphone, планшет apple ipad. Есть ли данные девайсы у новичка чтобы тестировать готовую верстку? Нет, поэтому и придуманы таки инструменты упрощающие и ускоряющие разработку. Главным критерием является это понимание инструкций - чтобы ресет не был черным ящиком.

 

Как только придет понимание этого факта, любые ресеты станут не нужны.  

. Т.е. - это равносильно изобретанию своего велосипеда. Ведь ресет будет присутствовать на сайте в любом случае. Он будет присутствовать по той простой причине, что без него сайт не обходится. Будь он вынесен в отдельный файл для последующей конкатенации, будь он просто разбросан по главному файлу стилей. 

Макет в целом и каждый отдельный элемент в частности имеет свои отступы, всегда и всецело отличающиеся от родных стилей браузера. Покажем это на примере селектора <p>. По умолчанию он имеет внешние отступы в 16 пикслей. Ни на одном сайте мне такие параметры не пригодились. Как правило margin я использую только нижний, верхний очень редко. Посмотрим на этот код:

 

/*NORMALIZE CSS*/

p {

  margin: 0;

  padding: 0;

}

 

/*STYLE CSS*/

 

.module p {

  margin-bottom: 15px;

}

 

.content p {

  margin-bottom: 20px;

}

 

 

Заметно как сбрасываются внешние и внутренние отступы для элемента. Затем для модулей на главной выводящих определенную информацию, нижний маргин замысловат именно таким. Для внутренних страниц для контента целесообразен и удобен маргин в 20px.

 

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

 

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

 

 

Универсальный селектор делает ширину и высоту элемента явно указаной и игнорирует отступы и границы. Разве это не делает верстку более удобной?

 

Весь вышележащий код можно вынести в отдельный файл и назвать его normalize.css или reset.css, а можно и не выносить. Можно затерять его в файле стилей, но суть будет одна. Так же можно прописывать данные св-ва только где потребуется, считая себя матером, но в ущерб скорости.

Я использую normalize.css настроенный под себя и _config.scss c кодом который повторяется от проекта в проекту.

 

о мне понимание этого тоже пришло не сразу, но тем не менее.  

 

Конечно, конечно - понимание приходит из опыта из практики.

 

Из этого всего вытекает, что отстутствие ресета на ваших проектах величайщее заблуждение. Ресет есть всегда. Всегда - это слово дает понять, что ресет в вашей верстке, знаете ли вы это или нет.

[wwt]

 

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

 

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

 

В общем я придумал: отказываюсь от своего симбиоза reset и normalize, больше их не использую, отдельно выделяю этот момент жирным текстом в резюме и отправляю резюме, например, в Яндекс на должность тим-лида. Уверен, что пройду без собеседования. 

 

Странные вы, вы понимаете слова совсем не так как я написал. Я не говорил что ресеты зло. Я лишь сказал что можно обойтись своими стилями под каждый конкретный проект.

[wwt]

Это потому что тебе alezriz сказал, с какого то форума русского? Думайте своей головой, мастера. Меня убедить ты точно не сможешь в своей глупости. Вот таких как тс жалко, они считают вас примером для подражательства.

 

Причем тут русский форум? Что за расовые предрассудки? Здесь сидят ребята далеко не только из России если что. И здесь люди высказывают свое мнение, а не пытаются кого-то в чем то убедить. Вы можете считать все что угодно, это ваше право.

 

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Довольно спорная практика применять сброс ко всем элементам дерева, в независимости от того нужно вообще это или нет.

 

Вот вы можете объяснить зачем вы устанавливаете box-sizing: border-box; всем элементам на странице? К примеру зачем оно элементам strong ? =)

[antonKar]

Я лишь сказал что можно обойтись своими стилями под каждый конкретный проект

Отнюдь, не только это.

 

К примеру зачем оно элементам strong

Скорее b; для стронга я с ходу могу вспомнить с несколько проектов, где для него можно было бы это применить box-sizing (но не нужно).

[wwt]

Скорее b; для стронга я с ходу могу вспомнить с несколько проектов, где для него можно было бы это применить box-sizing (но не нужно).

 

 

Почему скорее b?

И можете привести пример когда к нему вдруг понадобилось применить данное свойство =)

[lexxcode]

Ого как у парня бомбануло   

 

с какого то форума русского?

У нас у русских,

Ты смотрю любитель играть на рассовости и стране принадлежности? Это, по меньшей мере, не культурно, не красиво и не профессионально с твоей стороны. 

Хотя мне и пофиг, если честно

 

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

А то я чувствую, сейчас еще coolhtml начнет все мои 1447 сообщений на форуме мониторить

 

Думайте своей головой, мастера. Меня убедить ты точно не сможешь в своей глупости. Вот таких как тс жалко, они считают вас примером для подражательства. 

Почему же жалко ТС то? Он задал вполне конкретный вопрос, все вполне конкретно на него ответили, руководствуясь своим личным мнением. У ТС теперь есть целый выбор каким путем он готов пойти в данный момент. Что в этом плохого?

Применение normalize или reset.css ровно такая же глупость, как и не применение ресетов вовсе, все зависит от точки зрения

 

. Т.е. - это равносильно изобретанию своего велосипеда. Ведь ресет будет присутствовать на сайте в любом случае. Он будет присутствовать по той простой причине, что без него сайт не обходится. Будь он вынесен в отдельный файл для последующей конкатенации, будь он просто разбросан по главному файлу стилей. 

Такс, а вот теперь давай по порядку.

 

Для начала стоит отметить, что строго говоря, Normalize и Reset это разные вещи в корне.

 

Reset - Это тупой сброс, всего и вся, где надо и не надо. Более идиотского куска кода в css, чем это:

* {    margin: 0;    padding: 0;} 

найти крайне сложно. А мое любимое когда к этому еще добавляют кусок, который к чертям ломает все таблицы. Это вообще пик синдрома reset.css-головного мозга.

 

Normalize - Это уже нечто адекватное. Это хотя бы попытка, именно сгладить, огрехи разности отображения элементов в разных браузерах.

------------------------------------------------------------------------------------------

 

Отчасти ты прав конечно. Некоторая степень нормализации на странице будет присутствовать, будь она взята из готового куска или написана самостоятельно. Но, я эти вещи разделяю тоже. Потому что одни выбирают путь просто воткнуть Normalize.css и не думать, о том что ему действительно нужно, а что нет. А другие просто настраивают css под конкретные требования и не пихают ничего лишнего, как я в частности. Если взять классический Normalize.css by Nicolas Gallagher, да там есть интересные решения, есть странные. Проблема только в том, что на практике из этого реально понадобится 10% в лучшем случае. Смысл подключать все подряд? А потом еще мучиться от того, что оно где-то начнет тебе дорогу переходить.

 

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

. По умолчанию он имеет внешние отступы в 16 пикслей. Ни на одном сайте мне такие параметры не пригодились. Как правило margin я использую только нижний, верхний очень редко. Посмотрим на этот код:

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

 

Заметно как сбрасываются внешние и внутренние отступы для элемента. Затем для модулей на главной выводящих определенную информацию, нижний маргин замысловат именно таким. Для внутренних страниц для контента целесообразен и удобен маргин в 20px.

Вот берем твой код:

/*NORMALIZE CSS*/p {  margin: 0;  padding: 0;} /*STYLE CSS*/ .module p {  margin-bottom: 15px;} .content p {  margin-bottom: 20px;}

И смотрим, что ты делаешь. Ты сбрасываешь padding у элемента, которого этого паддинга нет по умолчанию никогда! Это совершенно лишенный смысла кусок кода. Смотрим дальше: margin

Если " .content p " это представление параграфа для контента, его можно выставить как дефолтное значение, а в модулях провести модификацию.

В итоге у тебя выйдет примерно так:

p {  margin: 0 0 20px;}.module p {  margin-bottom: 15px;}

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

 

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

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

 

Универсальный селектор делает ширину и высоту элемента явно указаной и игнорирует отступы и границы. Разве это не делает верстку более удобной?

* {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}

Нет, не делает это верстку более удобной. 

На практике явное включение border-box необходимо не так уж и часто.

Любой блок (display:block;), является гибким по умолчанию и занимает максимум доступной ширины с учетом border и padding, покуда ему не зададут ширину явно. Имея установленный по умолчанию box-sizing: content-box;

Есть некоторая потребность в border-box для элементов форм, да, ибо там вцелом присутствует неразбериха в этом плане. Для них вполне можно было бы прописать border-box. Но уж точно не через глобальный селектор. Присваивая его еще и тем элементам которым это не нужно, или вообще никакого эффекта не даст.

 

Я не буду спорить о том, что border-box, возможно более очевиден на первый взгляд. Пожалуй это так и есть, для начинающего, да и наверное для многих скилловых ребят. И да он явно более удобен и лучше подходит для решение определенных условий. Но все таки переключать боксовую модель глобально мне кажется не самым лучшим решением. Все же если вникать как все работает, то content-box в большинстве случаев лучше подходит.

 

Это на самом деле целая отдельная тема для обсуждения. Но я не думаю, что ребята в w3c, глупее нас с вами, в данном случае.

 

Я использую normalize.css настроенный под себя

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

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

 

Конечно, конечно - понимание приходит из опыта из практики.   Из этого всего вытекает, что отстутствие ресета на ваших проектах величайщее заблуждение. Ресет есть всегда. Всегда - это слово дает понять, что ресет в вашей верстке, знаете ли вы это или нет.

Да опыт дает понять многие вещи. Я тоже проходил все этапы, в свое время. И Reset использовал и Normalize, потом отказался от всего, просто за ненадобностью. 

Ну, а разницу между ресетом, нормалайзом и их не применением я уже объяснил.

-------------------------------------------------------------------------------------------------

=============================================================

 

 

Ну и как заключение. Ну да я высказался без каких либо объяснений в начале.

1. Я был уставший и без настроения. Так что приношу свои извинения, если показался резким.

2. Просто эта тема действительно поднималась крайне много раз и с некоторой периодичностью создается кем-то снова. Примерно в таком же ключе я уже объяснял свою позицию по данному вопросу.

 

Не много накаляет, что люди задают из раза в раз одни и те же вопросы, не пытаясь хотя бы не много поискать ответ самостоятельно. Я уже относительно давно на этом форуме и надо сказать вопросов вообще не задавал. Ну может пару раз было. Т.к. я привык копать интересующую меня тему. Старожилы которые постоянно крутятся тоже вопросы по минимуму задают, и явно не такого уровня. Тут если капнуть историю, то еще до того как я здесь появился, народ задавал вопросы совершенно другого уровня, там где действительно была проблема. А сейчас, как не "Где найти гуру", так "как поменять цвет у ссылки". WTF, ребята?

[coolhtml]

ok

[antonKar]

можете привести пример когда к нему вдруг понадобилось применить данное свойство

Какая-нибудь плашка текста с рамками вверху-внизу и внутренними отступами, и завычурно оформленная.

 

 

 

Более идиотского куска кода в css, чем это: * { margin: 0; padding: 0; }  найти крайне сложно

поясните пожлста эту мысль

 

 

 

Проблема только в том, что на практике из этого реально понадобится 10% в лучшем случае. Смысл подключать все подряд? А потом еще мучиться от того, что оно где-то начнет тебе дорогу переходить

Пусть будет. Вот честно, кушать не просит - и ладно, зато у меня 0 проблем. За последний год разве что 1 раз мне помешал content-box у input[type=search], но сие не проблема, больше у меня в будущем такая штука не возникнет. Ибо настраиваемо под себя.

 

 

 

Ты сбрасываешь padding у элемента, которого этого паддинга нет по умолчанию никогда

Вы прям вот ручаетесь за все-все-все популярные браузеры на винде, маке, андроиде и iOS? В том числе за все будущие браузеры, которые будут выходить? Я нет, поэтому лишняя перестраховка никогда не бывает лишней. 

Edited August 15, 2015 by antonKar

[lexxcode]

поясните пожлста эту мысль

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

Вот просто пример, как порятся списки из-за такого, как некоторым кажется, безобидного и такого полезного куска кода:

http://jsfiddle.net/alexriz/s321soh9/

 

А вот как оно будет выглядеть если не портить ничего:

http://jsfiddle.net/alexriz/9Ld8177z/

 

 

 

Пусть будет. Вот честно, есть не просит - и ладно, зато у меня 0 проблем. За последний год разве что 1 раз мне помешал content-box у input[type=search], но сие не проблема, больше у меня в будущем такая штука не возникнет. Ибо настраиваемо под себя.

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

 

 

 

Вы прям вот ручаетесь за все-все-все популярные браузеры на винде, маке, андроиде и iOS? В том числе за все будущие браузеры, которые будут выходить?

Вполне. 

[Sensei]

Тоже не вижу смысла использовать ресеты и нормалайзы в виде отдельных файлов.

С точки зрения архитектуры они как аппендикс, в котором намешаны куски типографики и лейаута.

При этом часть этих стилей скорее всего не пригодится, а часть будет еще раз переопределена.

[wwt]

Какая-нибудь плашка текста с рамками вверху-внизу и внутренними отступами, и завычурно оформленная.

для каких-то плашек текста есть span, синтаксически чистый элемент! А b это элемент с предустановленным стилем, а strong ещё и синтаксический смысл имеет, тем и отличается от b. Это по умолчанию элементы рассчитанные на выделение текста!!!  Ещё варианты?

 

 

Вы прям вот ручаетесь за все-все-все популярные браузеры на винде, маке, андроиде и iOS? В том числе за все будущие браузеры, которые будут выходить? Я нет, поэтому лишняя перестраховка никогда не бывает лишней.

а прикинь завтра вообще уберут такое свойство как padding, как вы будете подстраховываться от того чего нет? =) Я все понимаю, но в крайности бросаться не нужно.

[antonKar]

для каких-то плашек текста есть span, синтаксически чистый элемент! А b это элемент с предустановленным стилем, а strong ещё и синтаксический смысл имеет, тем и отличается от b

Кек, а плашка текста разве не говорит нам "Хехей, обрати на меня внимание, чувак, я очень важная инфа", как бы явно намекая на strong?

 

в крайности бросаться не нужно

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