Как не надо верстать сайты?

Question

[Flasher]

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

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

Answer 1

[Игорь Воротнёв]

А никак. Можно частично закрутить гайки (ограничить возможности), предусмотреть все элементы, в том числе прописать max-width, min-width и прочие полезности, дабы неожиданные правки не разрывали верстку. Но на 100% не получится. И есть только один вариант - объяснить клиенту, что сайт это живой организм, и взять его на платную поддержку. Ежемесячный объем правок в конце месяца оформлять как счет за почасовку. Тогда все довольны - клиент возможностями, разработчик красивостями, пользователи - адекватным сайтом без "вырвиглазов".

Answer 2

[Сергей Протько]

Модульность и разбиение на компоненты, отказ или минимизация каскадирования стилей. Если у вас в селекторах больше 4-х элементов то явно что-то пошло не так. Почитайте про БЭМ. Единственное что я бы не рекомендовал использовать этот подход в том виде в котором это подается, но идея вполне себе хорошая.

Что бы верстка не ползла при изменении клиентом контента нужно жесточайше его ограничивать в том что он может сделать (он же может разметку сломать). Для этого можно применить markdown.

Comments

[Flasher]

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

[Сергей Протько]

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

[Flasher]

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

[Сергей Протько]

Ну да, так выходит. Для упрощения можно сделать один шаблон (на less например) с переменными, сделать пробную страничку с разными вариантами, и просто один раз настроить эти стили.

[Flasher]

Я так и сделаю наверно, 1 раз написать стили ( параграфы, списки, таблицы, картинки ) и потом в каждый шаблон его вставлять, чтобы уберечь себя от любого контента на странице. А свои стили, делать с классами. Уф, живые сайты : (

Answer 3

[GreatRash]

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

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

Есть правда одно "но" - такой подход к разработке дорог. Проще заказать дизайн на фрилансе и потом обвинить во всех грехах верстальщика.

Comments

[Flasher]

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

Answer 4

[sergealmazov]

Ваши проблемы решает:

Яндекс.БЭМ
api.yandex.ru/bem

ООП CSS
webformyself.com/vvedenie-v-obektno-orientirovanny...

Comments

[Crash]

БЭМ не всегда уместен, разве что в реально сложных проектах

[Сергей Протько]

@sergealmazov Ни бэм ни ООП css (как по мне вообще тупая штука) никогда не решат всех проблем.

[sergealmazov]

@Fesor давайте только не будем возводить все в абсолют. Это уже философия. ООП css и БЭМ решают эти проблемы. Есть нюансы, как и везде, но данные проблемы решает безусловно.

[Сергей Протько]

Какие эти? У автора вопроса проблема не в корявости верстки а в отсутствии определенных стилей. Тут ни БЭМ ни что-то другое не помогут.

ООП css в том виде в котором преподносит это дело приведенная вами статья, как по мне, скорее вредный совет. Вопервых это никакое не ООП, во вторых id в селекторах, и куда туда можно БЭМ впихнуть?

Answer 5

[Юрий Лобанов]

Если заказчик вставляет в описание таблицу, не просто <table>, а <table class="opisanie-firmi"> или <table style="background: red;"> - куда Вы от этого денетесь?
И в чем собственно проблема? Боитесь, что в портфолио по ссылке все увидят эту красоту?
Ну наверное этого можно избежать, приложив эскиз. А если эскиз еще и с кратким описанием, то может даже по линку переходить не будут.

Comments

[Flasher]

Скорее всего тут другая сторона. Я как исполнитель должен отвечать за качество работ и заказчику сложно доказать, что блок поехал, только потому, что он вставил картинку, параграф или тааблицу...Тут кривые руки разработчика, за то, что не досматрел. Ну и потом исправлять всегда сложнее...

Answer 6

[Railchik]

Хм. Попробуйте писать свой css -ластик( или что то типа дефолтных настроек для всех сайтов). Будучи верстальщиком так и делал для поддерживаемых сайтов. Для разных сайтов будут конечно незначительные правки. Потом база знаний нарастет. Комментарии обязательны.