Правда ли, что верстальщик — пуп земли?

[wildhind]

В свободное от основной работы время подхалтуриваю иногда. Вот и сейчас.

Досталась задача натянуть готовую вёрстку на cms.

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

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

Пиксельперфект, минимализм, спрайты, css-reset, кроссбраузерность разве что не до IE2. Всё круто. Теперь я эту крутизну интегрирую с cms.

Каталог.

В cms разделы каталога созданы, выводятся. А согласно вёрстке у каждого раздела должен быть свой класс, а ещё у последнего раздела класс "last". Зашибись!

Ладно, cms достаточно функциональная, чтобы добавить в админке ещё одно поле для класса. Делаем пометку в инструкции для контент-менеджера.

Под классом last объединены специфические стили для именно данного раздела (ширина блока, background-position для спрайта иконки раздела и т.п.) и для последнего, каким бы он ни был (clearfix). Зашибись! А если нужно будет добавить ещё один раздел? Ладно, не ворчу, а разношу стили на два класса. В админке пишу один класс, а класс last прилаживаю на уровне шаблона. Одним злобным вопросом от недовольного заказчика меньше.

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

Меню: та же хрень со своим классом для каждого пункта. И ещё одщий у них класс. И никаких обёрток. Ну чо, круто! Минимализм! Аж целые доли секунды выиграли на одном тэге (правда, тут же их проиграли, проставив класс каждому элементу, но разве это важно? Крутость-то свою показать успели). Та же хрень с добавлением поля в админке для класса (прости, контент-менеджер). Выпадающее меню — это лежащий отдельно в коде блок, изначально скрытый, но проявляющийся с невероятно изысканным эффектом fadeIn(), описанным в скрипте. Скрипту айдишник блока скормлен в явном виде. Ну а как же? Иначе придётся лишние вычисления делать. Прости, контент-менеджер, но когда ты добавишь подменю к другому пункту, сам собой выпадать он не станет, нужно будет вносить изменения в супероптимизированный скрипт. А как иначе? Ведь доли секунды, крутизна неимоверная, оптимизация.

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

Изучаю гениальный код и понимаю, что для того, чтобы новости выглядели правильно, нужно текст новости обернуть в <p> с определённым классом. Весь текст. И неважно, что в нём может быть несколько абзацев. Какое значение имеет смысл текста против такой важной штуки как красота css? Списка в новости оказаться не может, видимо поэтому он и обнулён. Да и всё обнулено. И в коде css гордо красуется имя Эрика Мейера. Ну чо, круто! Крутой верстальщик знает такое имя. Респект ему пожизненный. А что ты думал, контент-менеджер? Красота требует жертв. А уж крутизна — тем более.

Включаю в cms режим правки, нужно изменить параметры компонента. Открываю окно параметров, а там… подписи к полям есть, а самих полей нет. То есть, они есть, конечно. Но их не видно: рамки обнулены и всё такое. Даже фокус обнулён. Да, пробираться теперь наощупь, зато Эрик Мейер.

Всё это венчает доктайп xhtml 1.0 strict. Уж промолчу о том, что этот доктайп намекает на несуществующий в природе, а существующий только в фантазиях w3c язык разметки, но… Прости, контент-менеджер, придётся тебе переквалифицироваться в программиста, учить js, чтобы обучить ссылку открывать страницу в новом окне. Ну или объяснить всему миру, что они неправы, а прав крутой автор вёрстки.

Описывать дальше всю эту крутизну можно ещё долго. Да только очень грустно становится.

Ребята, вы что, в самом деле не думаете, что дальше с вашей вёрсткой будет?

Для чего она вообще делается?

Может, стоит задумываться, как потом людям с этим работать?

Ну или хотя бы перестать удивляться обилию говносайтов.

Наболело.

[psywalker]

Закинь мне вёрстку в ЛС, интересно позырить)

[Svatov]

Для таких случаев есть телефон доверия. О какой CMS идет речь непонятно, о какой приближенной студии тоже неясно, верстку никто не видел, на каких условиях делали верстку вы не знаете, может ее тоже заказали фрилансеру за низкую цену и получили то, что хотели за такую цену. Как по мне здесь только ваш непрофессионализм, простите. Зная хорошо CMS и просмотрев верстку

можно ставить свои условия или же просто отказаться.

[mishka]

Как по мне, так это бок разработчиков CMS, что она не учитывает сброс стилей.

По поводу классов 'last' -- иногда верстальщику иначе не сделать(в вашем случае немогу судить можно было иначе или нет) и он ставит этот класс. А вам, если средствами CMS этого не сделать, то хотя бы джсом можно.

[wildhind]

Для таких случаев есть телефон доверия.

с этого места поподробнее, пожалуйста.

О какой CMS идет речь непонятно

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

о какой приближенной студии тоже неясно, верстку никто не видел

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

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

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

Однако речь несколько не об этом. Ясно же сказано: явно не начинающий. Сделал ровно то, что считается крутым и уважается форумными троллями. А сделать это не всегда просто. И сделал неимоверную круть, которая развалится при малейшем чихе.

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

можно ставить свои условия или же просто отказаться.

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

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

[Viper]

Дочитав до конца так и не понял, почему вы так уверенны, что это делал верстальщик(ну не CMS, а елементы верстки)...? Часто верстку в CMS делает тот же программист.

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

[wildhind]

Как по мне, так это бок разработчиков CMS, что она не учитывает сброс стилей.

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

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

По поводу классов 'last' -- иногда верстальщику иначе не сделать(в вашем случае немогу судить можно было иначе или нет) и он ставит этот класс. А вам, если средствами CMS этого не сделать, то хотя бы джсом можно.

Самое частое применение класса "last": у менюшки есть разделители между пунктами. Они делаются при помощи border-right, а для класса "last" делается border-right: none.

Этого не сделать иначе? точно? .menu a+a { border-left:стили; } уже не работает?

Ок, бывает иначе. Да, понимаю, :last-child не работает ещё кое в каких старых браузерах, которые приходится учитывать. Но тот же clearfix можно и к родителю приладить. И вообще отдельным элементом. Не всегда он вообще нужен, но когда нужен, чаще всего оптимальным решением будет именно отдельным пустым элементом сделать. :after тоже ещё кое в каких старых браузерах не работает. А однажды встретилось: .last:after { content: ""; clear: both; } … таки смысл?? А в ie7.js добавляется тот самый дополнительный элемент.

Средствами любых взрослых cms или шаблонизаторов такой изврат делается. Притом несложно. Но зачем??

[Viper]

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

А чем вас не устраивают стогие доктайпы, если их применение не влияет на оптимизацию(что бывает крайне редко)?

Вы не используете reset стили?

Вы противник спрайтов?

Если найти программиста не так уж и сложно, дизайнера — тоже, то верстальщика — практически невозможно

Я будто жыву в противоположном мире... Обычно от HR и рекрутеров слишу противоположные заявления...

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

Ну судить только по Вашему комменту, я бы не стал о студии. Но суть правильная и будет вам опыт

[troll]

Всё это венчает доктайп xhtml 1.0 strict. Уж промолчу о том, что этот доктайп намекает на несуществующий в природе, а существующий только в фантазиях w3c язык разметки, но… Прости, контент-менеджер, придётся тебе переквалифицироваться в программиста, учить js, чтобы обучить ссылку открывать страницу в новом окне.

A DOCTYPE must consist of the following components, in this order:

...

Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).

...

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

Edited May 9, 2012 by troll

[wildhind]

Дочитав до конца так и не понял, почему вы так уверенны, что это делал верстальщик(ну не CMS, а елементы верстки)...? Часто верстку в CMS делает тот же программист.

Ок. Почему.

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

Сегодняшний случай — вёрстка пришла из давно и хорошо знакомой мне студии, где я сотрудников знаю по именам и должностям. Знаю человека, который это делал, и его должность. Это верстальщик.

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

Ещё один предоставил вёрстку. Крутую вёрстку. До безобразия крутую. На указания на явные ошибки реагировал примерно так: «ты чепуху несёшь, я лучше знаю». Поскольку отвечать за проект мне, пришлось переделывать своими руками, всё дешевле, чем препираться. После исправления самых грубых ошибок от оригинала остались только фоновые картинки. Половину из них тоже следовало бы поправить, но уже ни сил, ни желания на это не оставалось, на мелкие огрехи были закрыты глаза. Это тоже верстальщик. И он тоже считал, что контент-менеджер должен молиться на его css-reset, а чтобы тексты хоть как-то выглядели, запомнить свой тэг и свой класс для каждого блока, где этот текст должен быть размещён.

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

а вы часто читаете код других разработчиков?

По коду иногда можно узнать человека лучше, чем в личной беседе.

Так вот у тех, кто просто решает свою задачу (неважно, насколько успешно), крайне редко можно встретить в коде самолюбование.

[mishka]

С очисткой потока в ие6-7 лучше чем в новых браузерах.

Так как там на родителя zoom: 1; и все работает.

А вот с :after в новых браузерах может быть бок. Сам не сталкивался, только могу предположить:

Так как последнее время все больше это используют для оформления, например, БГ дополнительно поцепить без дополнительного элемента. Поэтому беззаботно поцепить доп класс clearfix может не всегда получится.

Надо исследовать этот момент.

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

[wildhind]

А чем вас не устраивают стогие доктайпы, если их применение не влияет на оптимизацию(что бывает крайне редко)?

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

Ссылка в новом окне — это хрестоматийный пример. Но есть примеры и не столь очевидные.

Например, менюшка списком. Предположим, что есть обоснование для использования именно списка. Расположить нужно горизонтально и отцентровать. Напрашивается решение display: inline, не так ли? Но вот беда: между строчными элементами вкрадывается пробел и портит картинку. Как вы это будете решать при строгом доктайпе? А я использую жhtml, поэтому имею право просто не закрыть тэги li, и тогда элемент li закрывается строго там, где начинается следующий li, и никаких пробелов между ними.

Хотите ещё примеров? Поверьте, их есть у меня. Практика показывает, что xhtml — это круто, но ни разу не практично.

Вы не используете reset стили?

нет. Если соображения об удобстве контент-менеджера не убеждают, давайте посмотрим на этот скриншот:

Это добавляет удобства в разработке?

Речь о тех, кому проект достанется на поддержку.

Вы противник спрайтов?

ни в коем случае. Но нужно же знать меру!

Если картинки должны управляться через cms, их не следует объединять в спрайт.

Мы же делаем не сферическую вёрстку в вакууме, а сайт, который будет жить. Например, это интернет-магазин, который будет развиваться. У него появится новая категория товаров в ассортименте. Нужно добавить раздел в каталог. Нажимаем кнопочку в админке, пишем название раздела — и раздел готов. А вот поставить ему иконку — это поднимать исходники, перевырезать спрайт, править css. Оно стоит того?

Если найти программиста не так уж и сложно, дизайнера — тоже, то верстальщика — практически невозможно

Я будто жыву в противоположном мире... Обычно от HR и рекрутеров слишу противоположные заявления...

так ведь… от HR и рекрутеров у них другие критерии оценки. Если человек сказал «я верстальщик! согласен на з/п в стопицот раз ниже, чем у программиста», да ещё и ответил на тучку вопросов типа «кем вы видите себя в нашей компании через 25 лет» то HR считает, что свою работу сделал. Что из себя представляет такой «верстальщик», рекрутера не волнует.

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

Ну судить только по Вашему комменту, я бы не стал о студии. Но суть правильная и будет вам опыт

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

Беда, как мне кажется, в другом. Нет формальных критериев оценки качества вёрстки. Какие есть, те не выдерживают критики с точки зрения здравого смысла, хотя и очень нравятся некоторым верстальщикам.

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

Боюсь, что единственным верным выходом из столь плачевной ситуации будет написание собственных правил приёмки вёрстки.

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

вообще говоря, да. Формальная валидность не даёт ровным счётом ничего, кроме морального удовлетворения верстальщика.

Это чуть ли не единственный общепринятый способ формальной оценки качества вёрстки, но качество такой оценки весьма сомнительно. Никому ж не надо объяснять, как можно валидно наговнокодить?

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

С очисткой потока в ие6-7 лучше чем в новых браузерах.

Так как там на родителя zoom: 1; и все работает.

да. Как ни странно, действительно в ie6-7 здесь проще.

А вот с :after в новых браузерах может быть бок. Сам не сталкивался, только могу предположить:

Так как последнее время все больше это используют для оформления, например, БГ дополнительно поцепить без дополнительного элемента. Поэтому беззаботно поцепить доп класс clearfix может не всегда получится.

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

[s0rr0w]

Резюмирую вышесказанное. Основная претензия к тому, что верстка для статической домашней странички Уасилия Поупкина - это совершенно не то же самое, что верстка под CMS, и совершенно не аналог верстки интерфейсов.

[wildhind]

Резюмирую вышесказанное. Основная претензия к тому, что верстка для статической домашней странички Уасилия Поупкина - это совершенно не то же самое, что верстка под CMS, и совершенно не аналог верстки интерфейсов.

ну как бы типа того, да.

Хотя скорее к тому, что крайне редко кто-либо об этом задумывается.

[cyklop77]

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

Edited May 9, 2012 by cyklop77

[Viper]

cyklop77, есть еще такие сервисы для проверки как css lint и html lint. Может кому будут полезны

[cyklop77]

не знал. прикольно

[Viper]

Ссылка в новом окне — это хрестоматийный пример

Можете уточнить? Не уловил как это относиться к ошибкам валидации...

Например, менюшка списком. Предположим, что есть обоснование для использования именно списка. Расположить нужно горизонтально и отцентровать. Напрашивается решение display: inline, не так ли? Но вот беда: между строчными элементами вкрадывается пробел и портит картинку. Как вы это будете решать при строгом доктайпе? А я использую жhtml, поэтому имею право просто не закрыть тэги li, и тогда элемент li закрывается строго там, где начинается следующий li, и никаких пробелов между ними.

Мне не втречалось случаев, когда это было проблемой(не можно было просто решить). Не хочу критиковать(спорный момент), но читать подобный код мне было бы не удобно, а новичков мог бы сбыть с толку...ИМХО Если это не учитывать, то вполне себе решение...

[MiksIr]

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

Edited May 9, 2012 by MiksIr

[Viper]

не знал. прикольно

Предупрежу сразу: отличайте советы от ошибок) Там много спорных советов по коду... Но в тоже время, там можно узнать что-то новое. Документация большая, но на английском...(

[wildhind]

Ссылка в новом окне — это хрестоматийный пример

Можете уточнить? Не уловил как это относиться к ошибкам валидации...

в xhtml strict атрибут target считается ошибкой.

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

Например, менюшка списком. Предположим, что есть обоснование для использования именно списка. Расположить нужно горизонтально и отцентровать. Напрашивается решение display: inline, не так ли? Но вот беда: между строчными элементами вкрадывается пробел и портит картинку. Как вы это будете решать при строгом доктайпе? А я использую жhtml, поэтому имею право просто не закрыть тэги li, и тогда элемент li закрывается строго там, где начинается следующий li, и никаких пробелов между ними.

Мне не втречалось случаев, когда это было проблемой(не можно было просто решить). Не хочу критиковать(спорный момент), но читать подобный код мне было бы не удобно, а новичков мог бы сбыть с толку...ИМХО Если это не учитывать, то вполне себе решение...

Так вот у меня как раз и пример, как это решается без проблем.

Есть ещё варианты с отрицательным левым маргином, невероятные пляски с бубном вокруг font-size, но… не кажется ли вам, что это малость кривовато?

Где-то я даже такое решение встречала:

</li><!--
--><li>

это точно меньше сбивает с толку?

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

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

cyklop77, есть еще такие сервисы для проверки как css lint и html lint. Может кому будут полезны

Знатные сервисы. Над их советами как минимум стоит задумываться.

[sigma77]

Например, менюшка списком. Предположим, что есть обоснование для использования именно списка. Расположить нужно горизонтально и отцентровать. Напрашивается решение display: inline, не так ли? Но вот беда: между строчными элементами вкрадывается пробел и портит картинку.

Кстати, а разве это не решается средствами самой CMS?

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

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

[psywalker]

wildhind,

А этот вариант не пойдёт?

[wildhind]

Например, менюшка списком. Предположим, что есть обоснование для использования именно списка. Расположить нужно горизонтально и отцентровать. Напрашивается решение display: inline, не так ли? Но вот беда: между строчными элементами вкрадывается пробел и портит картинку.

Кстати, а разве это не решается средствами самой CMS?

айй.

Что делает любая cms?

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

В шаблоне при этом строго то, что сотворил верстальщик.

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

Если в шаблоне будет пробел, то он и в браузер попадёт.

А вообще именно этот пример приведён скорее как возражение против xhtml.

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

Да, диалог должен быть.

А вообще, нужно просто делать сайты, а не вёрстку.

Особенности той или иной cms могут быть какие угодно, но верстать так, что если не поставить <br> в середину заголовка, то тексты слипнутся — это я считаю неудовлетворительным качеством.

wildhind,

А этот вариант не пойдёт?

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

[MiksIr]

айй.

Что делает любая cms?

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

В шаблоне при этом строго то, что сотворил верстальщик.

Ну если используется шаблонизатор, то можно решить проблему чем-то вроде {strip}{/strip}