Верстка, CSS, HTML, SVG

Общие вопросы к специалистам по стилю верстки.

Прошу отвечать только тех кто действительно верстает не один год и хорошо в этом разбирается. А также прошу не разводить разговоры по поводу что круче и т. д. Потому как начинаю верстать макет, все четко, а к концу верстки в коде начинается бардак, то это забыл написать, то другое) Хочется как-то систематизировать это дело.
1) С чего начинаете верстку? Нарезка, написание всего html или постепенно html + css и т. д.
2) Что обязательно прописываете? p, em, h1-h6 и т. д.
3) Как тестируете верстку? Browserling вроде бы не плох, но интересуют ваши варианты.
4) Почему при верстке шрифтов (размер, цвет и т. д.) бывает так что ровняю абзац, половина абзаца четко pixelperfect, а потом в один момент текст начинает съезжать, как будто изменилось расстояние между буквами/словами?
5) Что насчет БЭМ, нравиться или нет? Как вы называете классы, id и т. д.
6) Какие классы присваиваете блокам? К примеру .header-contacts или лучше .header-top или просто .top и обращаться header .top?
6) На какие условные блоки вы делите css код?
7) Натягиваете на движок сразу или сразу верстка потом натяжка?
8) Делаете код под ИЕ и старые браузеры сразу или потом фиксите?

Также принимаю другие советы от специалистов)
1. С чтения ТЗ. А что такое нарезка? Когда то, в древние времена, макет сайта нарезали в фотошопе и куски картинок частями грузили на сайт... А что вы подразумеваете под нарезкой?
2. body прописываю. Остальное по мере написания. Правило одно - никаких правил.
3. От начала до конца верстаю в блокноте, тестю в firefox, отладка в firebug, по окончании тестирую во всех популярных браузерах, но зависит от цены, если делаю что то дешево, то забиваю на тест, честно предупредив заказчика. Хай сам тестит, если жадный.
4. Приведи пример на http://jsfiddle.net/ (Склоняюсь к ответу Сани...)
5. Повторю ответ Сани
6. Весь сайт в один общий див, затем header, content, footer, блочные - xxxBlock остальное по тексту. Никогда не называю классы русскими словами на транслите. Только английские слова. Часто применяю несколько классов (class="left block bgRed")
7. Сразу, и диз сразу, минуя фотошоп.
8. Как договоримся с заказчиком. Обычно оговариваю сразу - поддержка старых браузеров - 50$, обычно отказываются.
Григорий Воронов
Григорий Воронов
15 705
Лучший ответ
Жусуп Мусин Ого 50$! Да я за весь сайт верстка+натяжка беру тыщ 10 руб ))
1-3 лечится с помощью Emmet
4) потомучто криво верстаешь
5) чо за нах ?
6) header cooter content и menu а дальше зависит от степени воспаленности мозга в данный момент
7) сам пишу движки )
8) раньше оттачивал каждый элемент под все пять браузеров а щас забил на это теперь мне важнее функционал а не верстка
Жусуп Мусин 1) Причем тут Emmet? Там разве можно нажать чудо кнопку "Прописать все основные стили" и все.
4) Если бы криво верстал, то слова начинали бы съезжать уже с первого-второго слова или даже с первой-второй буквы. А то часть абзаца ровно, а потом едет.
5) Какая-то методика именования блоков от яндекса.
1) С оценки макета (какие элементы присутствуют, какие блоки повторяются (не обязательно 1 в 1), присутствуют ли кастомные шрифты, в каком виде иконки, если векторные и их много - создаю из них свой шрифт, будут ли модальные окна, какие галереи и прочие скрипты лучше поставить и т. д.). Дальше сохраняю все растровые картинки, делаю спрайт (ы). Верстаю поблочно: сначала html для первого блока, потом стилизую его, дальше следующий блок и т. д.
2) После оценки макета уже, в принципе, становится понятно, какие элементы нужно точно прописать. Но обязательно это body, a, заголовки (их кол-во зависит от макета, обычно это максимум h1-h3), p, списки (если одностраничный - обнуляю, если полноценный сайт - прописываю нормальные стили).
3) Как правило, все и так ровно, т. к. отлаживаю в Safari :) Но проверяю на всех установленных браузерах и устройствах (последние версии нормальных браузеров и IE9+).
4) Pixel Perfect - это не совсем буквально, допускается погрешность в несколько пикселей (НО не больше 5px), т. к. шрифты на разных ОС, устройствах и браузерах часто немного различаются.
5) К БЭМ отношение неоднозначное, именование классов блок_элемент постоянно использую, а вот модификаторы не очень люблю и использую нечасто, т. к. иногда очень громоздкий код получается.
6) Классы в соответствии с содержимым блока: header, header_contacts, header_phone и т. д.
header, nav, куча section и article, aside (если есть), footer
7) Когда как, но в последнее время сразу на MODx верстаю
8) Старые браузеры идут лесом, верстаю по принципу "постепенное улучшение", т. е. все будет нормально и ровно отображаться и работать в старых браузерах, но не так красиво, как в современных. Т. е. если нет теней, закруглений и т. д. в браузерах прошлого века это не страшно.
Жусуп Мусин Спасибо за ответ. Очень понятно описали все)
1) сначала делаю примерный шаблон сайта на html, затем начинаю писать стили, исправляя найденные ошибки и корректируя шаблон
2) немного не понял что хотите услышать
3) установил себе 3 браузера, но в основном тестирую верстку в разных разрешениях экрана (в хроме)
4) значит где-то накосячил
5) классы называю так, чтобы мог легко ориентироваться в коде
6) header, content, sidebar, footer
7) сначала верстаю, потом к движку прикручиваю
8) по IE перестал писать код т. к. не вижу смысла
Жусуп Мусин 2) К примеру верстаю страницу, там только h1 и h2 есть. Но как я понимаю желательно прописывать какие-то общие стили. Типа страница seo ready.
6) имею ввиду header а в нем 3 вертикальных блока (лого, контакты, информация.). Как какой класс лучше прописать к примеру для блока контакты? header-contacts или header-top-block? Или если когда-то придется перенести блок из шапки к примеру в футер, может тогда лучше просто top-block?