m9iv/Чеклист вёрстки

## Чеклист вёрстки
# Основные требования

- Соответствие макету(особенное внимание обращается на выравнивание блоков относительно друг друга).
- Кроссбраузерность (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.
- Шрифты подключаются [асинхронно](http://glivera-team.github.io/fonts/2016/03/02/fonts.html).

Авторы : [Glivera Team](https://github.com/glivera-team)
	# Основные требования

	- Соответствие макету(особенное внимание обращается на выравнивание блоков относительно друг друга).
	- Кроссбраузерность (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.
	- Шрифты подключаются [асинхронно](http://glivera-team.github.io/fonts/2016/03/02/fonts.html).

	Авторы : [Glivera Team](https://github.com/glivera-team)