
Чек-лист верстальщика
Гигиена кода – залог крепкой и надёжной вёрстки. Чеклист помогает не допускать банальных ошибок и освободить голову для решения сложных задач.
Этот чек-лист я использую для контроля собственной работы, при проверке вёрстки коллег и студентов курса «Базовый Frontend: HTML и CSS».
Для студентов существует набор жёстких ограничений, вроде запрета на position
и !important
. Решил не убирать их из списка, пускай и остальным служит напоминанием — а правда ли без этого не обойтись?
Также оставил геймификацию проверки домашек: у вас есть 5 баллов — 5 жизней. Тратьте их с умом, чтобы дойти до конца списка 😉
Содержание
-3 балла за каждый невалидный файл
Можно использовать совмещённый валидатор.
-1 балл за нарушение основного правила
HTML
- Отсутствуют пустые элементы.
- У пустых ссылок заглушка в виде хеша:
href="#"
. - Скрипты подключены перед тегом
</body>
. - Подписи инпутов внутри тега
<label>
. - В разметке шаблона нет тегов
<br>
и<hr>
. Они для разметки контента. - Разметка выполнена по БЭМу.
CSS
- В CSS нет стилизации через #ID,
- нет
!important
- и порядковых псевдоклассов
nth-child
.
Исключения:nth-child (even)
и:nth-child (odd)
, их использовать можно. - Адаптивность по принципу «mobile first».
- Уровень вложенности не более двух элементов.
Нельзя:.site .singlepage h1
Можно:.singlepage h1
- Указан альтернативный вид шрифта и тип семейства.
- Вёрстка выдерживает переполнение.
- У интерактивных элементов есть стили состояний
hover, focus, active, disabled
. Даже, если эти состояния не учтены в макете. - У элементов с
display: inline-block;
прописанvertical-align
. - Только для студентов курса: не используется
position
, пока не станет можно. Штраф за каждое свойство в документе.
Файлы
- В именах файлов нет пробелов.
- Названия файлов в нижнем регистре.
-0,5 балла за нарушение дополнительного правила
- Стили не дублируются, а заданы через общий класс.
- Наглядная иерархия вложенности, отбивается табом.
- Код написан единообразно: сохраняется последовательность написания свойств в CSS и атрибутов в HTML.
- Отступы заданы по «принципу банки».
- Оптимизирован вес изображений.
- У изображений понятные и осмысленные имена,
- заполнен атрибут
alt=""
, - и прописаны размеры в HTML.
Чек-лист верстальщика развивается
В будущем среди основных правил появятся:
- прогрессивное улучшение;
- соблюдение шага сетки, даже если этого не учёл дизайнер;
- наличие микро-разметки;
- и что-то ещё.
Напишите в комментариях правила, которые используете для контроля качества своей вёрстки.