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

Общие

Основные

1. Верстка производится в соответствии со стандартами языка HTML5 и CSS3 (W3C).

2. Структура макета строится на модульной сетке. Использование фреймворка Bootstrap, или отсутствие сетки (в случае малых проектов) обговаривается с заказчиком. Небольшие сайты — 2-3 страницы, Landing page – допустимо верстать без сетки.

3. Кроссбраузерность — макет одинаково корректно отображается в следующих браузерах:

  • MS Internet Explorer 9+
  • MS Edge (все версии)
  • Google Chrome 29+
  • Mozilla FireFox 18+
  • Opera 15+
  • Safari 7.1+

Поддерживаемые мобильные платформы:

  • Apple iPhone 5+
  • Apple iPad3+
  • OC Android 4+
  • OC Windows Phone 8+

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

  1. Единообразное написание и форматирование html, css и js кода.
  2. Кодировка документов utf-8 без BOM.
  3. Стили CSS и JS-скрипты вынесены в отдельные файлы.
  4. Цвет фона документа (body) всегда задан явно, если в дизайне на задан — то белый.
  5. Блоки с контентом имеют динамическую высоту (если дизайном не задано обратное).
  6. Названия классов и атрибутов должны быть логичными, человекопонятными, и однозначно указывать суть элемента, использование транслита не допускается ( .news__item а не .novosti_novost)

Изображения

Изображения сохраняются в форматах, соответствующим их предназначению:

  • JPEG – для фотографий,
  • PNG – для малоцветной графики,
  • SVG – для векторных изображений,
  • GIF — для анимаций

Иконочные изображения, кнопки и т. п. нарезаются в один файл-спрайт.
Графические файлы оптимизируются специальной программой для сжатия.

 

Шрифты

Шрифты имеющиеся в наличии в сервисе Google Fonts подключаются через CDN. Остальные шрифты подключаются через CSS свойство @font-face в следующих форматах:

  • EOT (если требуется поддержка MSIE8)
  • WOFF
  • TTF
  • SVG

 

HTML/CSS код

HTML разметка

  • HTML-документ имеет doctype HTML (HTML-5).
  • Верстка блочная, основной разметочный элемент — тэг <div>.
  • Различные логические элементы задаются семантически соответствующими тэгами.
  • Иерархическая структура — вложенность элементов показывается отступами, отступы отбиваются табуляцией.
  • Стили элементов задаются через классы, id используется для js.
  • Элементы форм всегда заключены в тэг <form>.
  • Для тэга <img> всегда задан аттрибут alt (если нет дынных то пустой), как правильно заданы размеры изображения, аттрибуты width и height.
  • В контентных фрагментах верстки используются теги <p>, <span>. Использование основных элементов разметки в контентных фрагментах недопустимо.

 

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

Все элементы имеют классы, кроме тех элементов тех блоков, структура которых однозначна ( напр. меню или формы ).
Названия классов задаются согласно схеме БЭМ:
.block
.block-mod
.block__element
.block__element-mod

Символ «__» (двойное нижнее подчеркивание) разделяет блоки и элементы, символ «-» (дефис) отделяет модификаторы, символ «_» (нижнее подчеркивание) отделяет слова в имени одного элемента/блока.

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

Модификатор задается для каждого элемента в блоке который имеет отличия от основного элемента.

 

CSS-стили

Для нормализации используется reset.css, normalize.css либо средства фреймворка.

  • Основной файл стилей имеет название style.css
  • Большие файлы стилей имеют оглавление
  • Блоки кода разделены комментариями
  • Каждый селектор с новой строки, допустимо показывать вложенность элементов в блоках отступами.
  • Правила записываются в несколько строк, объединенных по группам, либо каждое правило пишется с новой строки.
Яндекс.Метрика