Чек-лист верстальщика

Этот чек-лист я использую для контроля собственной работы, при проверке вёрстки коллег и студентов курса «Базовый Frontend: HTML и CSS».

Для студентов существует набор жёстких ограничений, вроде запрета на position и !important. Решил не убирать их из списка, пускай и остальным служит напоминанием — а правда ли без этого не обойтись?

Также оставил геймификацию проверки домашек: у вас есть 5 баллов — 5 жизней. Тратьте их с умом, чтобы дойти до конца списка 😉

-3 балла за каждый невалидный файл

• Валидатор HTM.
• Валидатор CSS.

Можно использовать совмещённый валидатор.

-1 балл за нарушение основного правила

HTML

1. Отсутствуют пустые элементы.
2. У пустых ссылок заглушка в виде хеша: href="#".
3. Скрипты подключены перед тегом </body>.
4. Подписи инпутов внутри тега <label>.
5. В разметке шаблона нет тегов <br> и <hr>. Они для разметки контента.
6. Разметка выполнена по БЭМу.

CSS

1. В CSS нет стилизации через #ID,
2. нет !important
3. и порядковых псевдоклассов nth-child.
   Исключения :nth-child (even) и :nth-child (odd), их использовать можно.
4. Адаптивность по принципу «mobile first».
5. Уровень вложенности не более двух элементов.
   Нельзя: .site .singlepage h1
   Можно: .singlepage h1
6. Указан альтернативный вид шрифта и тип семейства.
7. Вёрстка выдерживает переполнение.
8. У интерактивных элементов есть стили состояний hover, focus, active, disabled. Даже, если эти состояния не учтены в макете.
9. У элементов с display: inline-block; прописан vertical-align.
10. Только для студентов курса: не используется position, пока не станет можно. Штраф за каждое свойство в документе.

Файлы

1. В именах файлов нет пробелов.
2. Названия файлов в нижнем регистре.

-0,5 балла за нарушение дополнительного правила

1. Стили не дублируются, а заданы через общий класс.
2. Наглядная иерархия вложенности, отбивается табом.
3. Код написан единообразно: сохраняется последовательность написания свойств в CSS и атрибутов в HTML.
4. Отступы заданы по «принципу банки».
5. Оптимизирован вес изображений.
6. У изображений понятные и осмысленные имена,
7. заполнен атрибут alt="",
8. и прописаны размеры в HTML.

Чек-лист верстальщика развивается

В будущем среди основных правил появятся:

• прогрессивное улучшение;
• соблюдение шага сетки, даже если этого не учёл дизайнер;
• наличие микро-разметки;
• и что-то ещё.

Напишите в комментариях правила, которые используете для контроля качества своей вёрстки.