БЛОГ ГРАМОТНОГО ЗАКАЗЧИКА

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

Делая однажды очередную оценку сайта по верстке, мы написали довольно длинный список ошибок. Настолько длинный, что итоговым диагнозом была перевёрстка сайта.

Когда клиент получил рекомендацию, то задал нашим сотрудникам вопрос: «А на что вы ориентировались при написании рекомендаций? Есть ли список, документ? Где можно увидеть эти правила?», — и мы как-то призадумались... Ведь, действительно, список и правила были у нас в голове вырабатываясь там годами. Так появился документ «Требования к верстке».

ОБЩИЕ ПОЛОЖЕНИЯ

Верстка производится в соответствии со стандартами языка разметки HTML5 и CSS3.
Верстка производится на базе семантических фреймворков Uikit и Bootstrap 3 (далее - фреймворк), используемая версия фреймворка – последняя стабильная на момент начала верстки проекта.

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

Internet Explorer – версия 11 и выше;
Microsoft Edge – последняя актуальная версия;
Google Chrome – последняя актуальная версия;
Yandex browser – последняя актуальная версия;
Opera – последняя актуальная версия;
Mozilla Firefox – последняя актуальная версия;
Safari – версия 9.1 и выше.

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

мобильные устройства под управлением ОС iOS версии 10.12 и выше;
мобильные устройства под управлением ОС Android версии 6 и выше;
мобильные устройства под управлением ОС Windows Phone 10 и выше.

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

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

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

Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:

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

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

Все файлы кодируются в кодировке UTF-8 without BOM.
Необходимо минимизировать CSS-код и JavaScript-код.

ОБЩИЕ ТРЕБОВАНИЯ К ИМЕНОВАНИЮ КЛАССОВ

HTML разметка

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

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

Схема именования:

.block
.block-mod-value
.block-element
.block-element-mod-value

В качестве разделителя отдельных элементов имени класса или идентификатора равнозначно используются символы дефиса (-) или нижнего подчеркивания (_).
Использование символа дефиса предпочтительнее. Использование классов и идентификаторов равнозначно.

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

Для именования классов и идентификаторов используются следующие префиксы:

применяемые в фреймворках;
обозначающие разметку HTML;
обозначающие визуальное оформление элементов.

Семантика именования блоков

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

Применение каскада

Каскад стилей должен быть сведен к минимуму. Он допускается, в частности, в случае, когда необходимо оформить контент, редактируемый в WYSIWYG-редакторе; этот контент по возможности должен не содержать классов.

ТРЕБОВАНИЯ К СТИЛЯМ

Базовый CSS

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

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

Каждое свойство — на отдельной строке.
Каждый селектор — на отдельной строке.
Используйте сокращённые CSS-свойства, где это только возможно.
Используйте максимально короткие ID и class имена, но не в ущерб информативности.
Избегайте совмещения элементов с ID и class именами.
Свойство без префикса пишется последним.
Использование символа точки c запятой (;) в конце описания всех CSS-свойств обязательно.

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

Приблизительная схема расположения свойств:

{
Позиционирование
Параметры блока
Размеры
Таблицы / списки
Свойства текста
Шрифт
Цвет
}

Расположение по файлам

Стили, принадлежащие одному блоку, должны следовать друг за другом: сначала блок, потом его модификаторы (также переопределения для конкретных браузеров, для отключенного JS и т.п.), затем элементы и их модификаторы.

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

Использование CSS-препроцессоров

Поощряется использование CSS-препроцессоров LESS и SASS.
Каждый класс или идентификатор должен являться отдельным определением за исключением состояний, псевдоэлементов, медиа-запросов и т.п.
Следует использовать переменные, миксины, функции.
При использовании препроцессоров правила организации файлов такие же, как и для обычного CSS.
Общие используемые переменные и миксины должны быть вынесены в отдельные файлы и подключаться по мере необходимости.
Переменные для одного блока должны объявляться непосредственно перед ним.
Подключение стилей на сайт должно осуществляться через один файл.

ТРЕБОВАНИЯ К ИЗОБРАЖЕНИЯМ

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

для логотипов: SVG, PNG;
для визуального оформления: SVG, PNG;
контентные изображения: JPEG, PNG.

Для контентных изображений используется размер, не превышающий по своей по ширине ширину полосы основного контента веб-страницы.

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

Для изображений в формате JPEG используется однородная степень сжатия, не менее 75%.