Инфраструктура верстки

Заказывая верстку на стороне либо внутри в своей компании в большинстве случаев получаешь весьма неудобный результат. Недостатков (антипаттернов) несколько, пойдем по порядку.

Дублирование HTML-кода

Все повторяющиеся блоки копипастятся из макета в макет. Не надо объяснять, что подобная структура весьма неустойчива к любым изменениям в дизайне. Да и что тут объяснять — дублирование!
Совет один, верстальщик-~~сука~~ используй шаблонизатор.

Монолитный CSS

Это когда все правила пишутся в одном файле, каком-нибудь style.css или all.css. Чуть менее монолитный результат выходит когда для каждой страницы создается свой файл: index.css, article.css и т.д.
Но ведь есть еще повторяющиеся блоки, куда их пихать? Для них нужно создавать тоже отдельные файлы.
Верстальщики, в программировании давно уже все придумано — заимствуйте.

Структурируем CSS таким образом:
/page — страницы
/block — блоки
/browser — бравзер-специфик рулез
/util — глобальные штуки, библиотека стилей для css-препроцессора

ZIP-архив

Это когда верстальщик упаковывает версточку и отдает в виде архива. Энтропия и лишние затраты времени.
Пользуйтесь Гитом~~, йопте~~.

Неактуальный проект верстки

Верстальщик сделал дело, отдал версточку. Дальше с ней начинает работать суровый серверный программист. В лучшем случае в проекте останется папка, в которую программист сложит всю верстку. Дальше проект начнет жить своей жизнью и правки будут вноситься уже во внедренное. Разумеется верстка теряет свою актуальность.
Решение — верстка-внедрение. Шаблоны и для верстки и для внедрения должны быть идентичными.

Plain CSS

Пользуйтесь CSS-препроцессорами, они увеличат скорость разработки и уменьшат стоимость поддержки кода. Используйте Zen Coding для CSS и HTML — прокачайте скорость набора. ~~Работайте на Маке.~~

В следующем выпуске покажу пример системы верстки.

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

Теми: CSS, HTML

Михаил Якименко Front-end, UI designer 25.12.2011 02:50

Блин а че я раньше не замечал?

1-е Дублирование кода.. — а что если у меня встречается date + title или к примеру date + title + something с одинаковым стилем или к примеру div.item>div.item-in-left+div.item-in-right я не могу это копипастить? Писать все заново и css дублировать только классы разные? а как же addClass? Тупо как-то..

2-е монолитный css — согласен, но не всегда, а в продакшене за разбитые css подвесил бы за яйца.

3-е Git.. хм.. ну как бы пробовал, не однократно, работая фрилансером на запад часто встречаю людей с вот О_О такими глазами и они же просят сделай пожалуйста zip и отправь нашим программистам.. Пытался работать так и с открытми репами, и с закрытыми.. удобно только в «Верстка-внедрение»

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

Zen Coding для HTML супер! Адски-суперская вещь! Но вот для css учить эти задроты типа cs:bd, и сотни им подобным да ну...

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

Відповісти

Підтримати

Михаил Якименко Front-end, UI designer 25.12.2011 02:56

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

Михаил Якименко

Igor Kononuchenko Веб-мастер в SITG 25.12.2011 03:00

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

Михаил Якименко Front-end, UI designer 25.12.2011 03:03

Я только «за» насчет скайпа.. я только не пойму почему мимо кассы? :) Ну да я поздно заметил топик, но инфо то ты прочел? :)) Напишу тебе на мейл.

Igor Kononuchenko

Igor Kononuchenko Веб-мастер в SITG 25.12.2011 03:08

на досуге можешь полистать доклад, в котором я обобщил то что знаю по веб-проектам www.kigorw.com/...talks/itjam2011

Михаил Якименко Front-end, UI designer 25.12.2011 03:14

Волею судеб я его уже читал :) И я так же не мало знаю о веб-проектах :) И не мало знаю о html/css.. Но я как-то больше реалист, и уже набил столько шишек в html/css что знаю о чем говорю. Из твоего доклада не согласен только с 1-м «Шаблон создает верстальщик» — шаблониазторов в php не мало, в Django 2 мне известных, один я осилил второй к примеру нет(jinja, нет ни времени ни желания) так я не стану делать шаблон на jinja. Впрочем я может и не так понял тебя..

anonymous 17.04.2011 00:21

Dmytro Anderson Senior Front-End Engineer (React) 11.04.2011 23:23

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

Я вообще не понимаю как «это» прошло премодерацию на этом ресурсе. Администрации следует внимательнее относиться к такому контенту.

Sergii Voloshyn Product Manager в DOU.ua 11.04.2011 23:29

В вашем комментарии мало конструктива. В профиле написано «Хорошо верстаю». Какие ваши советы по инфраструктуре верстки?

Dmytro Anderson Senior Front-End Engineer (React) 11.04.2011 23:40

Для начала выучить русский. Потом узнать о сервисах сокращения ссылок.

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

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

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

О проблемах рук программиста я промолчу. Не люблю эту тему.

Последний абзац тоже фейл. LESS и SASS никакого отношения не имеют к Zen Coding. Автор же призывает использовать препроцессор совместно с ZC. То есть возвращаемся к моего первому предложению — выучить русский язык (желательно выше 8-го класса). И о препроцессорах тоже я ничего хорошего не скажу пока. Лично я к ним питаю отвращение, учитывая, что WHATWG уже делала заметки о такого рода изменениях в нативных таблицах стилей.

Как-то так. А вообще вот здесь человек описал порядок приёма-сдачи верстки и получил много положительных отзывов: habrahabr.ru/.../webdev/114256

Sergii Voloshyn

Sergii Voloshyn Product Manager в DOU.ua 11.04.2011 23:41

Похоже у вас отличный от Игоря подход к верстке, судя по
www.free-lance.ru/...sers/almazmusic

вы «не натягиваете» :)

Dmytro Anderson Senior Front-End Engineer (React) 11.04.2011 23:42

Переходить на личности — низко. Игорей не знаю, а портфель не обновлялся лет 300, т.к. нет надобности.

Igor Kononuchenko Веб-мастер в SITG 11.04.2011 23:50

да, с полной ссылкой в твиттере эпик-фейл, конечно, вышел

Dmytro Anderson Senior Front-End Engineer (React) 11.04.2011 23:52

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

Igor Kononuchenko Веб-мастер в SITG 12.04.2011 00:00

все это хорошо работает на проектах от 2-3 страниц

vitex ua 11.04.2011 19:11

Совет один, верстальщик-с*ка используй шаблонизатор.

+1! без него нереально верстать многостраничные макеты. «повбивав би» ©

Структурируем CSS

достаточно посмотреть как это удобно в итоге, например тут:

dl.dropbox.com/...esheets-dir.png

всегда тесно работал с прогерами, и делал интеграцию верстки полностью. от прогера только данные, папки views / для прогера read-only, для меня models,controllers — read-only.

Разделяйте труд блин :)

+ пользуйтесь snipets! забудьте напрочь как писать сложные, но часто встречаемые вещи.

чтото отхакали за пол дня рабочего — за 10 минут оформите снипет. экономия от полу дня до недели за год обесчена )

vitex ua 11.04.2011 19:18

Игорь, извени, чуть не понял что это про аутсорсинг )))

тогда да, теряется связь прогер — верстальщик...

Igor Kononuchenko Веб-мастер в SITG 11.04.2011 19:20

сначала назвал статью «Недостатски аусторсинга верстки», потом переименовал, только вот урла уже сгенерилась :(

vitex ua

Oleh Herych Head of Golang Unit in the Center of Excellence в Intellias 11.04.2011 19:35

аутсорс, не аутсорс. Яка різниця? за весь час жодного разу, на жодній компанії не бачив щоб хтось сидів тільки на верстці.

vitex ua 11.04.2011 21:50

на фрилансе вот требуют как раз zip с html css и все

Igor Kononuchenko Веб-мастер в SITG 12.04.2011 01:42

да, для проекта это лишние издержки

Sergii Voloshyn Product Manager в DOU.ua 12.04.2011 00:54

У Яндекса цілий офіс в Сімферополі сидить тільки на верстці.

Igor Kononuchenko Веб-мастер в SITG 11.04.2011 23:55

прикольная папка /layout/layout.scss — жертвы консистентности :)

Constantin Bosneaga 11.04.2011 18:28

По описанию идеальный верстальщик, но к сожалению нет таких. Разрезание верстки на layout и шаблоны, это почти всегда программист потому как верстка прямо в шаблоны фрейворка или CMS, значит надо разбираться в потрохах, вероятность 0.1%. наплодили сущностей... Дизайнер который знает что такое гит, просто монстр )

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

Igor Kononuchenko Веб-мастер в SITG 11.04.2011 18:51

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

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

vitex ua 11.04.2011 19:15

почемуто куча контор предлагает верстку сразу под CMS! и продают шаблон, не HTML, а шаблон под CMS. ставлю 10$ что верстка и шаблон делается одним человеком.

дизайнеру не знающему git (или другую систему) грош цена. он что будет по скайпу всю работу скидывать, или потом говорить что в email от 12 ноября был синий цвет — возьми его... ага, смешно :)

Oleh Herych Head of Golang Unit in the Center of Excellence в Intellias 11.04.2011 15:36

Маю одну пораду на рахунок окремих CSS для блоків. Інформація зверху правильна і перевірена роками. Хоча можу не погодитись з «бравзер-специфик рулез», я надаю перевагу писати універсальний код. Але давайте вернесомося до наших баранів. Якщо ми будемо мати багато CSS файлів то час завантаження почне збільшуватись, а це не є добрим фактором. Я давно задумався над упаковщиком. Суть його полягає в тому, що ми задаємо список файлів, які нам треба підключити. Він в свою очередь зберає це все в один файл і зберігає його під унікальним іменем. Упаковка відбувається тільки перший раз і якщо файл блоку було змінено. В інших випадках віддача йде з кешу. Туди ж можна вліпити GZip.

Valeriy Zamaraiev (junior lisper) 11.04.2011 15:44

Это ничем не отличается от комплияции исходников в машинный (или байт) код. «в программировании давно уже все придумано — заимствуйте»

Sergii Voloshyn Product Manager в DOU.ua 11.04.2011 16:12

Браузер как виртуальная машина.

Valeriy Zamaraiev

Oleh Herych Head of Golang Unit in the Center of Excellence в Intellias 11.04.2011 16:17

компіляція чуток з іншої опери. Тут це називається компресія і призначена вона для видалення непотрібної інформації з файлів (пробілів, розділювачів, коментарів чи мертвого коду). Є негативна сторона — читабельність і виправлення помилок.

Мій любимий компресор — google closure

vitex ua 11.04.2011 18:52

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

Igor Kononuchenko Веб-мастер в SITG 11.04.2011 15:47

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

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

Oleh Herych Head of Golang Unit in the Center of Excellence в Intellias 11.04.2011 16:08

Дозволю не погодитись. Було не раз що міняли якісь параметри, при цьому виявляється, що десь в кінці файлу існує фікс під ІЕ6. Для себе обрав провела писати так, що б працювало у всіх браузерах (як тільки це можливо). Насправді є набір простих правил, які можуть помогти, в першу чергу це валідний код.

Михаил Якименко Front-end, UI designer 25.12.2011 03:01

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