Как правильно верстать

[Nanto]

Интересует именно общий подход.

Как я вижу:

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

2) Заполняем контентом, вставляем менюхи и т.д. - более трудоёмкий процесс, ибо каждый элемент надо отдельно выравнивать (а они иногда очень не желают этого делать при заданных условиях). И вот тут обнаруживается первая засада: вроде общая структура у нас готова и зафиксирована, но наслдеование или overflow какого-нибудь блока ломают структуру... Приходится откатываться на п.1 и лепить вскую гадость типа "overflow: hidden" или <div style"clear:both"></div>. При чём порой (особенно при большом проекте) это не так легко отследить!

Типичный последний пример: структура есть, начал наполнять - наполнил, смотрю а в IE6 контент вниз съехал... За это время прописал около 200-300 css-правил... Пришлось всех иметь комментить (блок вернулся) и порциями снимать комментирование. Засада, например, оказалась в "margin: 20px auto" - перекорячило размеры у родительского блока... И так постоянно.

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

Дальше, оформление css...

В ну строку или в несколько - не суть важно. Интересно другое - кто как использует каскадирование?

Многие вижу, лепят всему и id, и class (при чём даже элементам которые единственные находятся в другом блоке с id). Но опять-таки, записи типа "#wrapper div p span > a{...}" - меня немного отпугивают; а не заставляют ли они браузер тупить при парсинге. Ведь обратиться к элементу по id, в приницпе гораздо быстрее, чем делать подобные переборы. И при разборе, код становится более очевидным... Но огромное кол-во id (особенно типа "wrapper_main_left_menu_2"), тоже не способствует читабельности...

Что ещё? Классы. Кто-то вначале переписывает вверху все возможные отступы и флоаты (mt10{margin-top: 10px}, mt20..., mt50..., fl{float: left},.. cr{clear: right}... ) и потом лепит по 5 классов каждому элементу - тоже не способствует читабельности! И вроде даже объёму кода - большая часть этих правил так и лежит мёртвым грузом, при том что иногда про них забываешь и отдельному элементу вручную прописываешь margin (вместо того чтобы навесить соответствующий класс). Опять-таки вмешивается каскадирование: очень трудно оценить "значимость" конкретного правила - вроде и прописал, а оно не работает (какое-то ранее прописанное правило перебивает)! В итоге код пестрит !important.

Что касательно оптимизации css. Удручающая ситуация!.. Есть дико навороченные редакторы. Но вот "вычистить css" толком никто не может! Максимум - сгруппировать свойства по алфавиту и отформатировать вид записи правил (ну ещё валидатор или CSSTidy).

А хотелось бы: группировка отдельного! куска правил по "индексу важности", анализ и выкидывание ненужных правил (для этого надо парсить весь код браузером, в том числе и js - и определять какие правила вообще не задействованы - нафиг их! - вроде не такая уж сложная задача), если есть два противоречивых правила - выкидываем менее значимое и т.д. Если оптимизация "умная" то структура страницы страдать не должна! Вместо этого все делают лишь одно - выбирают какое-то свойство (например color:#000) и перечисляют все классы и id в одном правиле... Вроде 200 байт съэкономили. А человеку код потом разобрать невозможно... К чему это я? Может кто-нибудь встречал адекватную оптимизацию?

Ну и т.д.

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

[Radiocity]

Сначало сижу и минут 5-10 думаю, как лучше сверстать имеющийся макет. Потом начинаю верстать по частям, постепенно заполняя страницу. Сверстав шаблон, прогоняю в валидаторе, правлю ошибки. Затем проверяю во всех имеющихся у меня версиях браузеров ( под win32, mac, altlinux) и правлю ошибки =)

Edited August 27, 2011 by Radiocity