Чеклист верстки

Maxim edited this page Mar 3, 2016 · 3 revisions

Основные требования

  • Соответствие макету(особенное внимание обращается на выравнивание блоков относительно друг друга).
  • Кроссбраузерность (ie10+, последние версии Chrome, Mozilla, Opera).
  • Не должно быть JavaScript-ошибок.
  • Кодировка: UTF-8.
  • DOCTYPE: HTML5
  • CSS и JavaScript в отдельных файлах.
  • Все поля, содержимое которых приходит из CMS проверены на работу с разным вариантом контента: короткий, длинный, длинный без переноса.
  • Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств.
  • Корректная работа при вбивании реального текста, надёжность вёрстки.
  • Отсутствует транслит в названиях классов, атрибутах, переменных препроцессора, названиях примесей и т.п.

Разметка HTML

  • Документ проходит проверку на валидность http://validator.w3.org/nu/..
  • Обязательное наличие label для input. Поля label и input/select в форме слинкованы.
  • Каждый элемент на странице имеет класс(исключение составляет контент, приходящий из CMS).
  • Таблицы используются только для создания таблиц.
  • <img> отображает исключительно смысловую картинку, все элементы дизайна должны задаваться как background соответствующего элемента
  • Применение тегов <footer>, <header>, <nav>, <artice>, <aside>, <main> для соответствующих блоков.
  • Заглавие страницы должно быть внутри тега <h1>. ​На странице может  присутствовать только один тег <h1>. Если у страницы нет явного заголовка(например на главной) в качестве <h1> используется блок с логотипом.
  • Для изображений с заголовком обязательно используются <figure>,<figcaption>.
  • Внутри тега <section> первым элементом должен быть заголовок(h2,h3,h4,h5,h6).
  • Для данных вида параметр-значение обязательно использовать <dl> <dt> <dd>.
  • Для всех типов перечислений однотипных элементов обязательно  использовать <ul> <li>.
  • Правильная логика следования заголовков по коду h1 ­> h2 ­> h3 ­> h4. Неправильно h1 ­> h3 ­> h2 ­> h4 (требование может нарушаться, если  по-­другому расположить блоки невозможно)
  • Активно использовать :after :before атрибуты вместо написания служебных пустых блоков.
  • Использование style внутри тегов разрешено только в случае динамических значений(Например - изменение позиционирования через javaScript).
  • Сначала на странице должен идти основной контент, после него дополнительный(например aside).

Стилизация

  • Стили сайта соответствуют стандарту CSS3, за исключением хаков и вендорных свойств.
  • CSS3 border-radius, gradient, box-shadow, text-shadow вместо использования графики.
  • Обязательно использование препроцессора sass в форме scss.
  • Независимость блоков в CSS: минимизация каскада, использование техник БЭМ.
  • Сайт должен корректно отображаться при любом разрешении экрана вне зависимости от устройства.
  • Footer всегда прижат к низу экрана.
  • Для свойств margin и padding всегда использовать короткую запись.
  • Обозначение цвета либо в hex (#000), либо в rgba если есть прозрачность, никаких ключевых слов.
  • Всегда задавать значения для позиционирования бэкграунда(background-position), и задавать их без ключевых слов.
  • При верстке не использовать id, только классы.
  • Использовать сброс стилей по Э. Мейеру (reset).
  • Изображение(img) всегда должно иметь элемент обертку, с указанием для этой обертки размеров и overflow:hidden;
  • Раскладка блоков на странице сделана с помощью flexbox(без float,inline-block).
  • В CSS отсутствует !important. Допускается использование !important при обосновании его необходимости в комментарии.

Именование классов

  • Только маленькие буквы
  • Если класс из нескольких слов – между словами подчеркивание: slider_block, bread_crumbs и т.п.
  • Если нужно добавить обработчик js к какому-то элементу ему дается дополнительный класс в стиле camelCase.
  • Не использовать презентационные классы(fz-15,color-green,block-left).

Доступность

  • Выделяется текст в текстовых блоках; кликаются кликабельные элементы (ссылки/кнопки).
  • Устанавливается ли фокус в поля форм.
  • Кликабельные элементы должны иметь указатель "курсор", перетаскивающиеся - "лапка" или "ресайз", активные/недоступные - курсор default.
  • Все активные элементы должны реагировать на наведение, не доступные/неактивные - не должны.
  • Клик по label должен переводить фокус в связанное поле;
  • Использованы input type="email,tel,password" для соответствующих полей.

Оптимизация

  • Растровая графика сжата
  • Для иконок используется иконочный шрифт, либо svg-спрайт. При невозможности получить иконки в векторном формате используетcя data-uri.
  • CSS- файлы минифицированны и сконкатенированны, подключены в теге <head>.
  • JavaScript-файлы минифицированны и сконкатенированны, подлючены перед закрытием тега <body>.
  • Удалены лишние стили, неиспользуемые в проекте(например, с помощью gulp).

Шрифты

  • Подключённые шрифты, их размеры и жирность соответствуют размерам в макетах и ТЗ.
  • Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
  • Шрифты подключаются асинхронно.