Что надо знать бэкэнд-программисту о верстке?

Question

[Linochka]

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


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


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


С чем вы сталкиваетесь, что ломают?

Answer 1

[Kuzzy]

...«тут нельзя оставлять пробел» и подобное.

Ну если ваша верстка от пробела разваливается, то проблемы скорее у вас, а не у программистов :)

Comments

[Linochka]

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

[SerDIDG]

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

[Всеволод Родионов]

А как, кстати, это сделать? я только font-size: 0 знаю, может, что-то еще есть?

[SerDIDG]

Этого должно хватить, иногда ещё нужно word-spacing убрать, в зависимости от случая.

[Kuzzy]

Вот тут все способы рассмотрены: css-tricks.com/fighting-the-space-between-inline-block-elements/

[MT]

Верстка НЕ ДОЛЖНА ломаться и не соответствовать макету от пробелов.

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

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

Answer 2

[daer]

По своему опыту могу сказать, что в 99% случаях моя верстка ломается у программиста из-за его невнимательности, забыл закрыть тег, напутал с вложенностью или порядком элементов, забыл какой-нибудь класс, решил, что надо переставить элементы потому-что так будет красивее и пр. Я не делаю так, что из-за пробела что-то ломается, если есть какие-то сомнительные моменты, то обязательно коммент. Так же из своего опыта, если программист пытается что-то доделать или поправить (ну сказал ему менеджер, что это надо поменять местами, это подвинуть), то получается фигня, которую надо переделывать верстальщику, и хорошо если верстальщика поставят в известность. В итоге, на мой взгляд, программист не должен трогать верстку, ну а если он хочет в этом разбираться и без участия верстальщика что-то делать, то нужно нормально углубляться в изучение верстки, верстать какие-то странички, практиковаться. Знания css свойств к сожалению не достаточно.

Answer 3

[xave]

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

Comments

[Linochka]

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

Answer 4

[MT]

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

Answer 5

[Илья]

Чтобы ничего не ехал и не ломалось, достаточно проверить верстку с разным количеством контента перед отправкой программисту. А насчет инлайн-блоков - лучше использовать метод с letter-spacing: -.31em;

Comments

[Богдан Насиковский]

"letter-spacing: -.31em;" интересно.. а откуда вы этот бубен взяли?

[Илья]

Ну, вот например: http://theamazingweb.net/2013/06/24/fixing-display-inline-block/ По моему скромному мнению это лучший хак для инлайн-блоков.

[Андрей Солдатов]

@Slasher а чем font-size: 0px; не угодил?

[Илья]

@frumcheg Если значения в пикселях, то font-size: 0px, разумеется, тоже прокатит)