Лучшая вёрстка формы

[s0rr0w]

exessqd1, s0rr0w, не знаю как вы, но я оцениваю верстку, в первую очередь, по одному критерию:

соответствует макету или нет

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

Поэтому задротство с pixel perfect'ом говорит скорее о негибкости процесса разработки, чем о качестве работы.

У кого тут такая плохая привычка с начала ругаться на несколько страниц, а потом сносить все посты? Отучайтесь. Быстренько идём сразу в приват и не мучаем пользователей.

А среди них были и полезные...

[Great Rash]

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

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

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

UPD: и вообще отсебятины быть не должно никакой. Есть четкое задание и все в равных условиях должны его выполнить. Показательна такая фраза от одного из участников:

Мне показалось, что так будет лучше

(в ответ на мое замечание, о том, что чекнутый чекбокс съезжает на пиксель вправо вниз)

Какая разница как показалось, есть макет и надо сделать по нему.

[Nekromancer]

s0rr0w, просто если ты поддался эмоциям (или ещё чему то) и вступил в перепалку ты не имеешь права сносить эти посты, какой бы статус у тебя ни был. Это показывает тебя с ещё худшей стороны.

(ты - речевая абстракция - некий индивид)

Great Rash, кстати Макс забыл тени поставить.

[psywalker]

s0rr0w, просто если ты поддался эмоциям (или ещё чему то) и вступил в перепалку ты не имеешь права сносить эти посты, какой бы статус у тебя ни был. Это показывает тебя с ещё худшей стороны.

(ты - речевая абстракция - некий индивид)

Он ничего не сносил, это я снёс флуд. Видимо случайно задел и другие посты. Каюсь

Great Rash, кстати Макс забыл тени поставить.

Где?

[Nekromancer]

s0rr0w, просто если ты поддался эмоциям (или ещё чему то) и вступил в перепалку ты не имеешь права сносить эти посты, какой бы статус у тебя ни был. Это показывает тебя с ещё худшей стороны.

(ты - речевая абстракция - некий индивид)

Он ничего не сносил, это я снёс флуд. Видимо случайно задел и другие посты. Каюсь

Я про тебя и говорю. То в общем то и не флуд был, а то, что описано мной выше.

Great Rash, кстати Макс забыл тени поставить.

Где?

Везде кроме кнопок или не помнишь уже?

[Great Rash]

Great Rash, кстати Макс забыл тени поставить.

Всё может быть. Я не говорю, что его верстка идеальна. Она наиболее приближена к макету и полностью работоспособна при этом.

[psywalker]

Везде кроме кнопок или не помнишь уже?

Погоди, но в полях формы я же поставил везде? Разве нет?

[sigma77]

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

UPD: и вообще отсебятины быть не должно никакой. Есть четкое задание и все в равных условиях должны его выполнить. Показательна такая фраза от одного из участников:

В том-то и дело, что чёткого задания не было: png отличался от псд, причем разные псд, тоже отличались друг от друга. В наиболее полном псд и были такие единицы измерения, как сделал exessqd1. Выпадающие списки были в пнг.

В общем-то там и другие есть несоответствия с дизайном, что у Макса, что у exessqd1. Дело то не в этом.

Погоди, но в полях формы я же поставил везде? Разве нет?

Подсказки были с тенюшками и где-то еще, не помню уже.

[Nekromancer]

Везде кроме кнопок или не помнишь уже?

Погоди, но в полях формы я же поставил везде? Разве нет?

А, ну да, я не уточнил - тени у текста.

[psywalker]

Везде кроме кнопок или не помнишь уже?

Погоди, но в полях формы я же поставил везде? Разве нет?

А, ну да, я не уточнил - тени у текста.

Ага, помню дружище, помню. Да, если честно, то надоеда мне это работа уже. Если так подумать, то можно постоянно улучшать, улучшать и улучшать, бесконечно).

[Nekromancer]

Да это так, коварное замечание

[exessqd1]

exessqd1,

1) Ты уверен, что моя экстроразметка лишняя и не приносит своих плодов?

Например http://screencast.com/t/AsxKXyPHc

Я стараюсь делать вёрстку, думая, ещё и о её будущем, а не придерживаюсь идеи сделать наименьшее кол-во "дивов"

Абсолютно, в будущем запретят ставить класс на h2?

2) Что ты имеешь ввиду, под словами "Неэффективный селектор"? Где они у меня, покажи плиз.

Ещё раз, медленно, внимательно, инфографика.

3) Как ты можешь сравнивать размеры проекта, если ты не сделал и 20% того, что требовалось?

Ещё раз, медленно, внимательно, инфографика.

4) Что значит "Тест на длинные слова"? Где это у меня, покажи.

Тест на длинные слова:

вставляешь в любой элемент "очеееееееееееееееееееееееееньдлиннннннннннннннннннннннноесловооооооооооооооооооооооооо"

Текст должен не выходить за пределы блока а перескакивать на другую строку.

5) Что значит "fallback css3"? Приведи пару примеров.

Имеется в виду gracefull degradation, чтобы css3 вещи в старых браузерах отображались упрощенно но красиво.

Конкретно по пункту: "Все решения которые можно с fallback'ом реализовать на css3 сделаны на css3"

У тебя маленькие кнопочки "+ - ?" сделаны картинкой хотя можно было бы сделать и на css3. Мелочь а неприятно.

6) О каких ИЕ6-7 идёт речь, если в задании их вообще не учитывалось?

Окей

7) Какой смысл показывать форму, при отключённом ЖС, если она всё равно работать без него НЕ будет?

Почему не будет? "Потому что я так сказал" - psywalker

---

Ну а с остальным ты я вижу согласен.

[psywalker]

exessqd1,

Абсолютно, в будущем запретят ставить класс на h2?

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

2) Что ты имеешь ввиду, под словами "Неэффективный селектор"? Где они у меня, покажи плиз.

Ещё раз, медленно, внимательно, инфографика.

Запарил уже фамильярничеством и своим тоном общения, там нихрена не указаны места с "Неэффективный селекторами", ткни носом, сложно?

3) Как ты можешь сравнивать размеры проекта, если ты не сделал и 20% того, что требовалось?

Ещё раз, медленно, внимательно, инфографика.

Несоответствие с макетом, в явных местах, так же есть и косяки, неправильное отображение в оговоренных браузерах. Например, в Опере. Какие тут несоглашения могут быть?

7) Какой смысл показывать форму, при отключённом ЖС, если она всё равно работать без него НЕ будет?

Почему не будет? "Потому что я так сказал" - psywalker

При чём тут эта чушь? Нельзя было нормально ответить? Или ты хочешь, чтобы я напоминил тут всем, за кого ты нас всех тут считаешь? Или ты думаешь, что у меня отшибло память и я уже всё забыл?

[Svatov]

exessqd1,

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

Edited October 3, 2011 by Svatov

[mishka]

Svatov

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

[psywalker]

Svatov

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

Всё, прекращаем эту тему. Закроем её.

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

[Nekromancer]

По моему Svatov, высказывался не в его защиту. Имхо в той работе столько багов и недоделок причём грубых и непонятных, которые я например сразу замечал и фиксил. Не знаю как у других, а у меня есть привычка если приложение не работает/не правильно работает то я в код даже не лезу. Ну вот какой смысл оценивать его если само приложение не работает? Да и как я понял там куча всякого бреда и пропаганда html4 и мол старые браузеры, ля ля ля, выключенный JS, человек об этом подумал. Не, ну кто просил думать? - просили выполнить задание.

И как я уже говорил - не выполнил задание - не выкладывай работу.

Всё, прекращаем эту тему. Закроем её.

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

А я только подсел на эту "тему".

[mishka]

1)Абсолютно, в будущем запретят ставить класс на h2?

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

2)Тест на длинные слова.

Да, нужно учитывать в кнопочках и мелких элементах.

3)Спрайты

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

4) Какой смысл показывать форму, при отключённом ЖС, если она всё равно работать без него НЕ будет?

Это правильно, но и у тебя, exessqd1, форма не полностью рабочая без джс. Слайдеры не работают, выбор бокалов не работает, стрелки галлереи не генеряться джсом, а изначально присутствуют в разметке.

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

А еще я несовсем понял функциональность этих элементов:

Я думал что это инпут с автокомплитом, но также возможностью вибрать вариант как в селекте (http://jqueryui.com/demos/autocomplete/#combobox - вот типа как тут)

[psywalker]

mishka,

1)Абсолютно, в будущем запретят ставить класс на h2?

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

Да, именно с таким расчётом я и делал этот блок.

3)Спрайты

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

Да, и у меня с этим большой прокол. Согласен. Будет мне урок.

А еще я несовсем понял функциональность этих элементов:

Я думал что это инпут с автокомплитом, но также возможностью вибрать вариант как в селекте (http://jqueryui.com/...plete/#combobox - вот типа как тут)

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

[Svatov]

Очень было бы интересно увидеть пункт:

1. Количество неэффективных селекторов

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

Edited October 3, 2011 by Svatov

[s0rr0w]

Очень было бы интересно увидеть пункт:

1. Количество неэффективных селекторов

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

И методология оценки эффективности тоже не помешала бы...

[Svatov]

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

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

Edited October 3, 2011 by Svatov

[exessqd1]

Очень было бы интересно увидеть пункт:

1. Количество неэффективных селекторов

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

И методология оценки эффективности тоже не помешала бы...

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

Например:

.ingredient-details li { }

В данном случае ключевой селектор это li.

Эффективность этого li зависит от того сколько на странице ещё таких же li, чем их больше - тем больше браузер выберет(сматчит) элементов, тем медленнее отрисовка страницы.

Браузеры сначала матчат все элементы на странице которые относятся к ключевому селектору а потом идут вверх по дереву пока не находят соответствия.

Т.е здесь браузер сматчит все li на странице а потом пойдет вверх по дереву и сматчит все li относящиеся к классу .ingredient-details

Скорость отработки этого селектора можно оптимизировать, уменьшив в нем общее количество элементов и количество элементов которые матчит браузер в соответствии с ключевым селектором, поехали

---

Оптимизируем селектор

Мы не знаем сколько классов .ingredient-details__item будет на странице но их должно быть явно меньше чем li, так что превращаем

из

.ingredient-details li { }

в

.ingredient-details .ingredient-details__item { }

Здесь мы проставили на каждый li класс .ingredient-details__item

Теперь этот селектор отработает быстрее т.к. ключевой селектор .ingredient-details__item матчит меньше элементов.

Но здесь из-за 2 элементов в селекторе браузер лишний раз проходит по дереву,

то есть мы как-бы говорим ему: "лисичка, хромик, деточка-опера, осел выбери-ка нам все .ingredient-details__item, ага, а теперь ещё все .ingredient-details__item которые относятся к .ingredient-details".

Устанут детки яблоки перебирать, запыхаются.

Этот селектор тоже можно оптимизировать, убрав .ingredient-details он нам не нужен, наш класс .ingredient-details__item и так напрямую относится к .ingredient-details и вне него существовать не может, превращаем

из

.ingredient-details .ingredient-details__item { }

в

.ingredient-details__item { }

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

---

Правила

Два главных правила скорости селекторов а значит скорости отрисовки страницы:

1. Скорость селектора напрямую зависит от количества сматченых ключевым селектором элементов.

Например:

1. Если у вас на странице будет 9999 span и 9999 .class, скорость у них будет одинаковая.
   
2. Если у вас на странице будет 5000 span и 9999 .class, селектор по классу будет медленнее.
   
3. Если у вас на странице будет 9999 span и 5000 .class, селектор по типу будет медленнее. (обычно так и бывает, но вряд ли в таких количествах^^)
   

2. Скорость селектора зависит от количества элементов в селекторе

Например:

1. .ingredient-details span { } отработает медленнее чем просто span
   
2. .ingredient-details .ingredient-details__item { } отработает медленнее чем просто .ingredient-details__item { }
   

---

Таблица эффективности селекторов * Украдено с CSS-tricks

#main-navigation {   }      /* ID (Самый быстрые) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Тег (Селектор типа) */
ul li a {  }                /* Тег (Селектор типа) */
* {   }                     /* Универсальный (Самый медленный) */
#content [title='home']     /* Универсальные (Медленнее медленного) */

Цитата David Hyatt: * Украдено с CSS-tricks

Контекстный селектор(селектор потомка) это самый дорогостоящий селектор в CSS.

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

или универсальным селектором.

Другими словами вот это катастрофа быстродействия:

html body ul li a {  }

---

Зачем все это?

Мы экономим миллисекунды, ну допустим прирост производительности за счет быстрых селекторов будет 200мс.

Так и кому полезны эти 200мс? Может просто забить?

Ан нет, как вы все знаете, jquery напрямую взаимодействует со страницей то есть когда например мы делаем .animate({"margin-top": "50px"}, "fast"); браузеру придется примерно 50 раз перерисовать страницу чтобы отработала анимация.

(но и тут есть свои хитрости конечно)

То есть прирост производительности в 200 мс увеличит скорость отработки и плавности анимации, может быть это будет не заметно на небольших страницах с небольшим количеством js, но на страницах больше 30кб с большим количеством анимации это будет ощутимо, даже очень. А в старых браузерах и подавно.

Где-то у харисова была заметка что скорость отрисовки страницы, которая была сверстана независимыми блоками(нет медленных селекторов), в ie6-7 увеличилась в 3-5 раз, в ie8 в 2-3 раза, в остальных браузерах меньше но тоже ощутимо.

Хочувсезнать: Страница отрисовывается(рендрится) при загрузке, или при работе javascript.

---

Не только селекторами земля полнится

На скорость отрисовки страницы влияет множество факторов например глубина DOM.

Подробнее в книжке Мациевского "Реактивные веб-сайты".

---

Как конретно померять скорость отрисовки?

Вот например так:

http://jsfiddle.net/E49EL/1/

http://banzalik.ru/labs/perf-test-classes/perf-test-classes1.html?reflow-meter

Правда на разных компьютерах rewlow time будет разным, зависит от самой системы.

---

Дополнительные материалы

Та самая, знаменитая статья на 30 000 div'ов

http://clubs.ya.ru/bem/replies.xml?parent_id=375&item_no=338&with_parent=1#reply-yacf-375

Firefox отрисовывает страницу

CSS-triks про эффективный css

http://css-tricks.com/6386-efficiently-rendering-css/

Мозила про эффективный css

https://developer.mozilla.org/en/Writing_Efficient_CSS

ещё

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942

Видео на английском про эффективность селекторов

[Shift-Web]

Это всё замечательно, но, к сожалению, неактуально, ибо эффект нулевой ): Есть браузеры и новые стандартны, за которыми они не успевают, имхо ... Самая простая вёрстка без наворотов и думок над оптимизацией, вкупе с толстым скриптингом вполне себе работают везде и достаточно быстро ....

Edited October 5, 2011 by Shift-Web

[psywalker]

exessqd1,

Воот, наконец-то, нормально ответил. Спасибо за объяснения, приятно было читать, но:

1. Всё это конечно здорово, БЭМ и прочие вещи, но тут нужно ещё и понимать, что это не панацея и что такой строгий подход не всегда бывает полезен, т.е. может быть и полезен, но не так эффективен, как мы от него ждём. Вёрстка вёрстке рознь. Если ты делаешь хомяк, небольшой сайт визитку или ещё чего на подобии, то эти методы будут только мешать, так как понесут за собой траблы с удобочитаемостью кода, а скорость при этом ни чуть не изменится или изменится, но на столько, что в итоге игра-то и не стоит свеч.

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

Я считаю так, что всегда нужно смотреть по ситуации. Если это ну очень оправдано, то конечно же использовать этот подход.

p.s. Да, и конечно же я не имею ввиду, что должно быть пофиг вот на такой вот ужас

treehead treerow treecell {…}

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

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