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

Обновлено: 30.12.2018

Общие

Основные

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

2. Структура макета строится на модульной сетке. Допускается использование фреймворков Bootstrap 3, Bootstrap 3, Zurb Foundation 6.
Небольшие сайты c нестандартной структурой – допустимо верстать без сетки.

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

  • MS Internet Explorer 10+
  • MS Edge (все версии)
  • Google Chrome 47+
  • Mozilla FireFox 57+
  • Opera 17+
  • Safari 9+

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

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

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

  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 в следующих форматах:

  • WOFF, WOFF 2
  • 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
  • Большие файлы стилей имеют оглавление
  • Блоки кода разделены комментариями
  • Каждый селектор с новой строки, допустимо показывать вложенность элементов в блоках отступами.
  • Правила записываются в несколько строк, объединенных по группам, либо каждое правило пишется с новой строки.
  • Используются css-линтеры.

 

Скрипты

Программирование динамического функционала макета реализуется на языке JavaScript. Как правило используется библиотека jQuery.

  • JS-код вынесен в отдельный файл script.js
  • Для небольшие скриптов и нетиповых задач код пишутся «с нуля».
  • Для решения типовых задач используются (Сложный функционал реализуется) плагинами (Подробнее+)
Яндекс.Метрика