Стандарты HTML верстки
Содержание
- Соответствие макету
- Кроссбраузерность
- Валидность 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.
добавьте свой комментарий