чеклист верстальщика

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

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

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

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

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

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

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

-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.

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

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

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

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