Стандарты HTML верстки

2016-08-07 Андрей Нилов

Содержание

Соответствие макету
Кроссбраузерность
Валидность HTML кода
Оптимизация скорости загрузки страницы
Надежность
Требования к сторонним библиотекам
Требования к HTML/CSS/JavaScript

1. Соответствие макету

Расположение блоков в сверстанной странице должно быть "один к одному" по сравнению с исходным макетом, за исключением случаев описанных ниже.

Для текста допускается расхождение по сравнению с исходным макетом не больше 5px.

Блоки, содержимое которых выравнивается автоматически (ширина, высота, деление на равное количество частей и т.д.) верстаются программным путем. "Перфект пиксель" не производится для блоков если в макете размеры и расстояние для них выставлены не верно. Если не указано иное.

Блоки, которые выходят за базовый контейнер, верстаются внутри базового контейнера, если не указано иное.

При расхождении сеток в макетах с сеткой "Bootstrap", делается подгонка к сетке "Bootstrap", если не указано иное.

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

Веб версии шрифтов могут не соответствовать десктопным версиям в PSD макете. Так же шрифты в различных операционных системах и браузерах могут воспроизводиться по разному. Все связанные с этим расхождения являются допустимыми.

Верстальщик использует те цвета и размеры шрифтов, что были предоставлены в PSD макете.

Цвета в различных операционных системах, браузерах и дисплеях могут отличаться в сравнении с другими браузерами, дисплеями, операционными системами. Все связанные с этим расхождения являются допустимыми.

При отсутствии макетов и технического задания для адаптивных версий страницы, адаптивность производятся на усмотрение верстальщика.

2. Кроссбраузерность

Поддержка веб-браузов:

Google Chrome – последняя версия;
Opera – последняя версия;
Mozilla Firefox – последняя версия;
Safari – последняя версия;
Internet Explorer – последняя версия;
Microsoft Edge – последняя версия.

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

Apple iPhone 4 и выше, в последних версиях бразуеров Safari, Google Chrome;
Apple iPad 2 и выше, в последних версиях бразуеров Safari, Google Chrome;
мобильные устройства на базе ОС Android версии 4.2 и выше, в последних версиях бразуеров Android, Google Chrome;
мобильные устройства на базе ОС Windows Phone версии 8 и выше, в последних версиях бразуеров Internet Explorer, Google Chrome.

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

3. Валидность HTML

Сверстанная страница не должна содержать ошибок в HTML (проверяется онлайн-валидатором - validator.w3.org) и JavaScript (проверяется в консоле бразуера Google Chrome).

4. Оптимизация скорости загрузки страницы

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

вынести подключение CSS и JavaScript в конце HTML страницы, перед закрывающим тегом "body" (там где это возможно);
объединить изображения в спрайты (там где это возможно);
объединить svg иконки в шрифты (там где это возможно);
объединить отдельно CSS и JavaScript файлы (там где это возможно);
подгружать JavaScript-библиотеки и шрифты с CDN (там где это обоснованно);
минимизировать CSS, JavaScript и HTML;
оптимизировать графику.

5. Надежность

HTML страница не должна иметь горизонтального скролла в разрешениях от 1024px (если не указано иное).

Вёрстка должна оставаться устойчивой (не должна ломаться):

при добавлении в элементы большего количества текста;
при использовании картинок с неподходящими размерами;
при отсутствии картинок;
при при увеличенном масштабе (не более 150%);
при изменении размера (ресайзе) поля "textarea".

6. Требования к сторонним библиотекам

Сторонние библиотеки/плагины должны подключаться с помощью менеджера зависимостей "Bower".

Критерии к выбору сторонней библиотеки:

наличие репозитория в "github";
наличие стабильной версии;
последнее обновление не более 2-х лет.

Не рекомендуется создавать собственные плагины/библиотеки, если существуют подходящие решения удовлетворяющие требованиям описанным выше.

7. Требования к HTML/CSS/JavaScript

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

Верстка производится:

в соответствии со стандартами "HTML5" и "CSS3";
в соответствии с методологией "БЭМ";
на базе css-фреймворка "Bootstrap 3". Если "Bootstrap" не может быть использован, необходимо использовать "normalize.css";
на базе шаблонизатора "Twig";
с использованием препроцессора "LESS";
с использованием системы сборки "Gulp".

7.2. Общие требования к HTML разметке

Форматирование HTML кода должно быть иерархическим, отступ должен составлять 4 пробела.
Верстка HTML страниц должна быть реализована без использования JavaScript (там где это возможно).
Необходимо следовать семантики HTML5. Использовать существующие тэги HTML5 (header, footer, aside, nav, section, article и т.д). 2. Каждый тег должен использоваться по назначению (div для блоков, ul для списков и т.д.).
Необходимо правильно организовать структуру заголовков H1-H6. На странице не должно быть двух заголовков H1.
Кодировка для HTML страниц должна быть определена как "UTF-8".
Значения всех атрибутов HTML тегов должны быть заклюены в двойные кавычки (там где это возможно).
Классы которые используются в JavaScript должны начинаться с префикса "js-" и не должны использоваться для оформления стилей.
Для адаптивности необходимо использовать подход от меньшего к большему (порядок расположения стилей). Запрещено в одном проекте использовать сразу два подхода (от меньшего к большему и от большего к меньшему).
Все внешние ресурсы необходимо хранить в папках с названием блока или компонента (например, /images/news/bg.jpg).
Для всех картинок необходимо определять аттрибут "alt".
Необходимо определять цвет фона для тега "body". Если цвет не указан в макете, необходимо использовать белый.
Запрещается использовать размеры больше 100% (за исключением случаев, когда на этом построена логика работы, например галереи и т.д.).
Верстка контента, редактируемого в WYSIWYG-редакторе, не должна содержать классов (там где это возможно).
На HTML странице должны присутствовать "favicon" (с вариациями 32x32, 48x48 и 64x64) и "apple-touch-icon". "favicon" и "apple-touch-icon" должны быть предоставлены дизайнером. "favicon" и "apple-touch-icon" должны быть в формате ".png".
Для ссылок на e-mail необходимо задавать атрибут "mailto", для ссылок на телефон - атрибут "tel".
Запрещается использовать атрибут "id" с целью оформления стилей.

7.3. Требования к блокам и сетке

Нельзя строить сетку с помощью таблиц и позиционирования.
Все сетки/колонки, выполненные без использования "Bootstrap" должны быть реализованы по такому же принципу как колонки в "Bootstrap".
Для родителя каждого плавающего блока должно быть указано миксин "clearfix" или свойство "overflow: hidden".
Если проект подразумевает адаптивность, то не должно быть фиксированных размеров для блоков (кроме случаев где это необходимо).
Любой блок должен быть резиновым (если не указано иное), где его размеры будут определяться параметрами сетки.

7.4. Требования к шрифтам

Для каждого подключаемого шрифта должен быть задан базовый шрифт.
Необходимо наличие Win/Mac/Linux-аналогов шрифтов. Шрифты и их аналоги предоставляются дизайнером.
Любой сторонний подключаемый шрифт должен называться так же как и его оригинальное название.
Для указания прозрачности цвета шрифта необходимо использовать свойство "RGBA", а не "opacity".

7.5. Требования к HTML5 формам

Для тегов "label" должен быть определен атрибут "for". Атрибут "for" должен ссылаться на соответствующий тег элемента формы.
Для каждой формы должна присутствовать HTML5 валидация обязательных полей.
Необходимо правильно определять типы для тега "input" (”email", "url", "tel”).
Если используется "Bootstrap", формы должны быть реализованы в соответствии с методологией bootstrap форм.

7.6. Требования к БЭМ

Запрещается использование элементов без блоков.
Запрещается использование модификаторов блоков без блоков.
Элемент не должен содержать больше одного модификатора. Каждый элемент блока который имеет больше одного модификатора должен быть переделан в самостоятельный блок.
Необходимо соблюдать "БЭМ дерево".

7.7. Требования к именованию классов

Названия классов должны быть на английском языке. Запрещено использовать транслит.
Названия блоков и элементов должны определяться по их функциональному назначению и визуальному отображению. Запрещено определять названия классов по названию тегов, за исключением новых тегов HTML5 таких как "header", "footer", "nav", "video" и т.д.
Блоки одинакового отображения, но различного функционального назначения оформляются как один блок с нейтральным названием, отражающим их сходство.

7.8. Требования к стилям

Запрещается использовать глобальные стили. За исключением сброса значений по умолчанию.
Каскад стилей должен быть сведен к минимуму (за исключением случаев когда это необходимо для интеграции верстки, например для контента редактируемого в WYSIWYG-редактора).
Нельзя привязывать стили к тегам. За исключением каскадных селекторов, где это обоснованно (например таблицы, меню "Bootstrap").
Запрещается использование !important (правило теряет силу, только в том случае, когда нет технической возможности создать обертку для элемента).
Для поддержки старых браузеров необходимо добавлять соответствующие свойства (свойства с префиксами).
Каждое CSS свойство должно быть указано на отдельной строке.
Необходимо использовать сокращённые CSS-свойства, там где это возможно.
Необходимо указывать символ точка c запятой (;) в конце описания всех CSS-свойств.
В свойстве "url" адрес к ресурсу необходимо указывать без кавычек.
Для нулевых значений не требуется указывать размерные единицы (неправильно: 0px, правильно: 0).
Внешний вид кнопки должен одинаково отображаться для тегов "a" и "button".

7.9. Требования к Less коду

Форматирование Less кода должно быть иерархическим.
Каждый класс должен являться отдельным определением (за исключением состояний, псевдоэлементов, медиа-запросов и т.д.).
Внутри блока не должно быть других блоков, за исключением врапперов над текущим блоком.
Стили для адаптивности располагаются внизу файла и представлены в единственном экземпляре, т.е. не может быть две медии на одно расширение.
Не следует определять вложенность больше 2-х уровней. Необходимо чтобы “&” всегда указывал на имя блока.
Каждый блок должен быть определен в отдельном ".less" файле.
Общие используемые переменные и миксины должны быть вынесены в отдельные файлы и подключаться по мере необходимости.
Переменные должны быть названы в формате "@new-post-color: #fff;", миксины - ".post-background(@url) {}".

7.10. Требования к JavaScript коду

Необходимо придерживаться нового стандарта JS (ECMAScript 6), где это допустимо.
Для именования переменных и функций необходимо использовать стиль "camelCase".
Если много JavaScript кода, то его необходимо вынести в отдельный файл.
Любой код jQuery необходимо оборачивать в анонимную функцию.
Для переменных, которые являются jQuery объектами, необходимо указывать префикс "$".
Для всех базовый операций с массивами, строками, коллекциями необходимо использовать библиотеку "underscore" (или "lodash").

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

Для логотипов и иконок необходимо использовать изображения в формате svg. svg изображения должны быть предоставлены дизайнером.
Изображения, должны учитывать экраны "Retina". Изображения для "Retina" дисплеев должны быть предоставлены дизайнером.
Все иконки одной группы, должны быть одинаковой высоты и ширины.
Контентные изображения должны быть представлены в jpeg формате, там где это возможно (например, отсутствует прозрачный фон).
jpeg изображения должны быть определены в формате progressive jpeg.