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

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

• Соответствие макету. Pixel Perfect верстка (особенное внимание обращается на выравнивание блоков относительно друг друга).
• Кроссбраузерность (последние версии Chrome, Mozilla, Safari, Edge).
• Не должно быть ошибок в консоли браузера, а также вывода console.log().
• Кодировка: 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 при обосновании его необходимости в комментарии.
• Все значения в css (padding, margin, width, height) должны делится на 2. (Bad - 12.1rem).
• Порядок объявления свойств. Пример https://i.imgur.com/UjMKLfx.png

	@extend

	Позиционирование
	Блочная модель и размеры
	Текстовые свойства
	Отображение
	Остальное
	Плавные переходы, анимация

	@include mixin

Javascript

• Повторяющийся код выносим в функции.
• Элементы к которым идет обращение несколько раз, кешируем.
• Избегаем добавлений непонятных значений по типу https://i.imgur.com/xJwAOGS.png, для таких значений задаем понятное имя.
• Не анимируем свойства top, left, bottom, right, height, width, из-за которых происходить перерисовка страницы. Анимируем только transform и opacity. Высоту анимировать можно только в каких-то простых ситуациях, например при добавлении аккордеона.

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

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

Работа с GITHUB

• именование коммитов. ():

fix(): фиксы feat(): - фича refactor(): - рефактор improvements(): - улучшения, доработка

example: feat(IndexPage): added new page, fix(product-section): add correct font size to title

Доступность

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

Оптимизация

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

Шрифты

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