Требования к верстке

Верстка производится в соответствии со стандартами языка разметки HTML5 и CSS3. Для написания разметки и стилей используется методология БЭМ.

Поддерживаемые браузеры:

• Internet Explorer – версия 9 и выше;
• Microsoft Edge – все версии;
• Google Chrome – последние три версии;
• Yandex browser – последние три версии;
• Opera – последние три версии;
• Mozilla Firefox – последние три версии;
• Safari – последние три версии.

Поддерживаемые мобильные платформы (при условии использования по умолчанию предустановленных на устройствах браузеров):

• Apple iPhone 4;
• Apple iPad 2;
• мобильные устройства под управлением ОС Android версии 4.0 и выше;
• мобильные устройства под управлением ОС Windows Phone версии 8 и выше.

Общие требования

1. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
2. Использование jQuery.
3. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
4. Цвет фона для body задан всегда. Если конкретный цвет не указан в макете, используется белый (#fff).
5. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.
6. Недопустимы грубые ошибки в разметке (ссылки сделаны не тегом <a>, абзацы должны быть абзацами, а не <br><br>, формы должны быть только внутри тега <form>).
7. Не рекомендуется использование !important без крайней необходимости.
8. Нельзя использовать транслит в названиях классов, атрибутах и так далее.
9. Нельзя строить сетку с помощью таблиц и позиционирования.
10. Для сброса стилей использовать normalize.css.
11. Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.

Контроль качества

Верстка не должна ломаться в следующих случаях:

1. При добавлении в элементы большего количества текста.
2. При использовании картинок с неподходящими размерами.
3. Текст не должен выпадать из объектов.
4. Переполнение контентными блоками не приводит к нарушению сетки.

Кодировка файлов

Все файлы должны иметь кодировку UTF-8 without BOM.

HTML-разметка

• Для разметки используются теги HTML5.
• Все теги пишутся в нижнем регистре.
• Значения всех атрибутов заключаются в двойные кавычки (").
• Форматирование HTML иерархическое, отступ — один символ табуляции.
• Используется блочная верстка.
• Табличная верстка может использоваться только в теле контента, редактируемого посредством WYSIWYG-редакторов.

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

Для именования классов используется стиль No-namespace из методологии БЭМ:

• .block
• .block__element
• .block__element _modificator

Форматирование стилей

• Каждое свойство — на отдельной строке.
• Каждый селектор — на отдельной строке.
• Не используйте ID для селекторов.
• Добавляйте пробел перед открывающей скобкой { в определении правила.
• В описании свойств должен быть пробел после : и не должно быть перед ним.
• Закрывающую скобку } всегда размещайте на новой строке.
• Использование символа точки c запятой (;) в конце описания всех CSS-свойств обязательно.

Порядок CSS-свойств

Необходимо группировать свойства по назначению в следующем порядке:

• параметры отображения блока
• размеры
• позиционирование
• цвет, граница
• шрифт
• остальные свойства

Требования к изображениям

Форматы используемых изображений в порядке приоритета:

• для логотипов и оформления: SVG, PNG
• для контента: JPEG, PNG

Для улучшения производительности иконки, используемые на сайте необходимо собирать в единый спрайт или шрифт.

Использование сборщиков

Для сборки проекта желательно использовать автоматический сборщик Gulp. В качестве CSS-препроцессора можно использовать Stylus, Less, Sass, в качестве шаблонизатора: Pug, Nunjucks.

Исходный код

Исходный код должен быть опубликован в доступном репозитори github.com. Другие варианты не рассматриваются по причине заблокированного доступа к ним.