Критерии вёрстки | HTML markup checklist

1-markup.md

1. Разметка

1.1. Грубые ошибки в разметке отсутствуют.

• Ссылки сделаны не тегом <a>, а другими тегами;
• Использование строчных элементов для создания крупных (сеточных) блоков;
• Абзацы сделаны не тегами <p>, а <div>, <span> или с помощью <br>.

1.2. Разметка сайта должна быть валидна относительно https://validator.w3.org/ .

1.3. В разметке строго соблюдается иерархия заголовков.

1.4. В разметке отсутстует дублирование кода для одного и того же элемента, с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной. Этот критерий не касается элементов, которые скрываются или показываются в ранзых версиях.

1.5. В разметке используется методология БЭМ как система именования. Отсутствуют типовые ошибки по методологии:

• Создание элемента без родительского блока;
• Создание элемента для элемента;
• Создание модификатора для модификатора;
• Использование модификатора без блока или элемента, который он модифицирует (при использовании модификатора у тега должно быть, как минимум два класса: класс блока/элемента и класс модификатора)

1.6. Названия полей форм привязаны к своим полям с помощью <label>.

1.7. Весь текстовый контент на сайте прогнан через типограф.

1.8. На всех телефонных номерах и email стоят атрибуты tel: и mailto:.

1.9 Выполнена HTML-разметка всех страниц проекта и всех элементов на этих страницах.

Скрытые и дополнительные элементы должны быть размечены: всплывающие и появляющиеся элементы, модальные окна, всле слайды в слайдере.

2-styles.md

2. Стили

2.1. Раскладка блоков на странице сделана с помощью флексбоксов и/или гридов.

Использование тега <table>, float: left и блоков с абсолютным позиционированием недопустимо. Использовать табличную раскладку блоков с применением свойств display: table, display: table-row, display: table-cell не запрещено. Позиционирование с помощью position: absolute для декоративных элементов и модалньых окон не запрещено.

2.2. В CSS отсутствует !important.

2.3. Подключены правильные шрифты, их размеры, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.

2.4. Шрифты подключены в CSS локально из папки fonts с помощью правила @font-face. Подключаемые шрифты должны быть в форматах woff2 и woff. Порядок подключения файлов: сначала woff2, потом woff.

2.5. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.

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

2.7. По умолчанию поддерживаются 5 последних версий стабильных браузеров Chrome, Mozilla, Opera, Safari и Edge Chromium. А также стабильные версии мобильных браузеров.

Вёрстка идентично отображается в последних версиях браузеров. Проверяются размеры и расположение блоков, внешние сходство с макетом.

2.8. Никакой текстовый контент сайта не зашивается в CSS.

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

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

Даже если не предоставлен UI-кит, реализуется на своё усмотрение (например opacity: 0.7). Если кит есть, то мы добавляем только плавность. Добавляется курсор лапка на элементы, на которые можно нажать.

2.10. Обводка ховеров по умолчанию не отключенна, или меняется на предоставленной в дизайне.

3-adaptability.md

3. Адаптивность

3.1. Для адаптива используется резина с перестроением на контрольных точках.

Резина — это принцип при котором на сайте есть резиновая сетка и максимальная ширина. При достижении максимальной ширины, блоки центруются и не увеличиваются. При уменьшении экрана блоки сужаются по ширине, а при достижении контрольной точки перестраиваются иным образом.

3.2 Выполнена вёрстка трёх состояний каждой страницы: мобильной, планшетной и десктопной.

Сетка в промежутках между основными точками может быть фиксированной или резиновой. Важно: вне указанных точек вёрстка не должна «разваливаться»:

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

3.3 В разметке есть правильный вьюпорт тег.

Адаптивность должна работать на планшетах и мобильных устройствах. То есть не только при изменении ширины окна браузера.

4-scripts.md

4. Скрипты и функционал

4.1. Для реализации скриптов используется нативный JavaScript если иное не указано или не согласовано.

4.2. Реализованые все визуальные компоненты, на которых не завязана работа с данными.

Модальные окна, табы, слайдеры, смена контента и так далее.

4.3. Все формы по умолчанию имеют базовую валидацию и маски для телефонов и ввода email.

4.4. Модальные окна закрываются по клику оверлей и на клавишу ESC.

4.5. Перемещение блоков со скриптами и скриптов между страницами не ломает работу остальных скриптов.

Для этого скрипты подключаются ко всем страницам в одинаковом виде.

4.6. Если мобильное меню полностью перекрывает HTML-страницу, то HTML-страница под ним не должна как-либо взаимодействовать с пользователем (скроллинг, весь интерактив и т.д.)

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

5-graphics.md

5. Графика

5.1 Выполнена ретинизация всей контентной растровой графики.

Графика должна быть подготовлена как минимум для двух вариантов экранов: с обычной и двойной плотностью пикселей

5.2. Вся декоративная графика на сайте ретинизируется.

Точно так же как и контентная графика. Но в отличие от неё, декоративная делается через CSS. Все иконки сохраняются в векторный формат SVG

5.3. Выполнено кадрирование контентных изображений.

С помощью тега <picture> выполнено кадрирование контентных изображений.Кадрирование в данном случае подразумевает загрузку разных фотографий на разном разрешении экрана.

5.4. SVG графика собирается в векторный спрайт.

5.5. Для всех контентных изображений явно указан размер.

5.6. Для фоновых изображений указан фоновый цвет.

5.7. Видео добавляется на сайт через айфрейм YouTube или других сервисов.

6-optimization.md

6. Скорость загрузки и работы сайта

6.1. Все стили сайта собраны в один файл, который подключается в секции head.

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

6.2. Все скрипты и библиотеки собраны в один файл и подключены в самом конце страницы.

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

6.3. Вся графика сжимается максимально возможным образом, чтобы не терялось качество.

6.4. Выполнена «нежная» ретинизация.

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

6.5. На всех страницах для контентных изображений используется ленивая загрузка изображений.

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

preload только основных шрифтов с первого экрана, чтобы они не дёргались, но и не увеличивали время загрузки.

6.7. Выполнены базовые оптимизации Lighthouse.

Все требования по скорости тестируются в Lighthouse, он же PageSpeed. Не целимся в конкретную оценку, так как она зависит от множества факторов. Задача — выполнить всё необходимое чтобы она была как можно выше. Тестирование скорости проходит без подключённых внешних скриптов и счётчиков аналитики.

7-additionally.md

7. Дополнительно:

7.1. Допустимо исправлять огрехи дизайн-макета с разными отступами между одинаковыми элементами

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

7.2. Для организации стилей используется методология БЭМ.

В исходниках каждый БЭМ-блок это отдельный стилевой файл. Блоки независимы друг от друга и могут перемещаться между страницами. Если используется один файл .css блоки разбиваются комментариями на секции.

7.3. Стилизация контентных областей выполнена через каскад

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

7.4. Вёрстка соответствует дизайн макетам, по принципам Pixel Perfect

При этом есть допуски 2-3px, а так же учитывается тот факт, что макеты универсализируются. Принцип не используется на длине текстовой строки, так как шрифты по разному рендерятся в разных браузерах. При применении пункта 3.1, допускается расхождение с макетами.

7.5. Вёрстка делается по принципу desktop-first.

7.6. Футер «прибит» к низу HTML-страницы.

7.7. Опционально подготовлена графику в современных форматах.

Таких как .avif или .webp.

7.8 Единообразное написание и форматирование кода.

7.9 Отсутствует транслит в назаваниях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее.