Этапы верстки

Подготовка проекта

Нужно получить список всех шрифтов в макете, чтоб сразу их скачать. 2 способа:

Скачиваем. Далее нужно сгенерировать шрифты для веба: https://transfonter.org/

Обязательно отмечаем Family support. Если шрифт популярный (типа Open Sans), отмечаем Add local() rule

Ни в коем случае не отмечаем: Autohint font и Base64 encode.

В большинстве случаем можно генерировать только WOFF, поскольку у него хорошая поддержка: http://caniuse.com/#search=woff.

Менеджер шрифтов Nexus Font — помогает каталогизировать и просматривать шрифты без установки в систему (в т.ч. в Фотошопе и Иллюстраторе).

Все слои с картинками в макете переименовываем по принципу "название.расширение":

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

Далее сохраняем их в отдельную папку рядом с макетом командой Файл => Генерировать => Набор изображений

Проверяем. Картинки, которые сгенерировались не так, как надо, сохраняем вручную.

Скрин настроек для простых иконок - decimal places = 1 Скрин настроек для сложных изображений (логотипов и т.д.) - decimal places = 3+

Верстать блоками, а не страницами.
Использовать БЭМ-подобное именование классов.
Один блок - один неймспейс и один файл стилей.
Уровень вложенности элементов только ОДИН: .block__element (не будут раздуваться верстка и стили).
При появлении дополнительных уровней вложенности .block__element__element2 - их надо выносить в другой блок .block2__element2.
Блок не должен никак позиционироваться по отношению к внешнему миру: никаких внешних отступов, а тем более абсолютного позиционирования у блока быть не должно. Позиционирование в потоке - это задача: а) либо каркаса (лэйаута в терминах SMACSS), который окружает блок, б) либо модификаторов блока (.block--offsets).

Как определить блок:

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

Классы не должны состоять из следующих конструкций или содержать эти конструкции в названии:

Все это слова из стоп-листа Adblock и блоки с такими классами просто будут резаться с установленным Adblock у пользователя.

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