Формальные критерии оценки качества вёрстки

Базовые критерии:

1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.
2. Один стилевой файл на все страницы (с учётом normalize.css можно два).
3. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.
4. Сайт должен нормально смотреться на минимальном для данного макета разрешении:
   • При большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла.
   • На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.
5. В корне документа должны быть папки css, img, js или аналогичные. Главная страница имеет название index.html. В названиях и расширениях файлов нет заглавных букв и пробелов.
6. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
7. Грубые ошибки в разметке отсутствуют. Например:
   • Ссылки сделаны не тегом < a >, а другими тегами.
   • Использование строчных элементов для создания крупных (сеточных) блоков.
   • Абзацы должны быть абзацами, а не < br >< br >
8. Нельзя строить сетку с помощью таблиц и позиционирования.
9. Нельзя использовать !important в CSS.
10. При наполнении контентом как на макете элементы каждой страницы должны соответствовать макету:
    • Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине.
    • Допускаются отсутствия стилизации кастомных элементов форм.
    • Допускаются различия в отображении шрифтов, связанные со сглаживанием на различных платформах.
    • Должны быть подключены правильные шрифты, а их размеры и толщина должны соответствовать размерам в макетах и ТЗ.
11. Выбран правильный формат изображений:
    • JPEG для фотографий.
    • Всё остальное в PNG.
12. Документ должен проходить проверку на валидность validator.w3.org

Дополнительные критерии:

1. Нельзя использовать транслит в названиях классов, атрибутах и так далее.
2. Нельзя использовать #id для стилизации.
3. Нельзя использовать вложенность селекторов больше двух.
4. Необходимо подключить normalize.css к вёрстке отдельным файлом.
5. Необходимо явно указать подходящее vertical-align для всех блоков с display: inline-block.
6. Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.
7. Необходимо расположить CSS-префиксы в правильном порядке.
8. Необходимо явно прописывать цвет фона для блока у которого есть фоновое изображение. Цвет должен соответствовать преобладающему цвету фонового изображения (пока изображение не загружено, страница выглядит похоже на макет).
9. Необходимо, чтобы все состояния элементов из styleguide.psd были использованы.
10. Необходимо, чтобы при взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняли своего положения.
11. Необходимо использовать:
    • Спрайты для изображений или иконочный шрифт.
    • Минимизировать CSS-код.
    • Минимизировать JavaScript-код.
12. Необходимо у всех изображений в теге прописать размер.
13. Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
    • При добавлении в элементы большего количества текста.
    • При использовании картинок с неподходящими размерами.
    • Текст не должен выпадать из объектов.
    • Переполнение контентными блоками не приводит к нарушению сетки.
14. Необходимо подключить все скрипты непосредственно перед
15. Необходимо использовать минимально возможное количество элементов HTML.
16. Необходимо использовать подход Progressive Enhancement, например:
    • Кнопка с формой входа ведёт на отдельную страницу.
    • Интерактивная карта без JavaScript показывает статичную картинку с картой.