Рекомендации по верстке сайта

HTML-код

Проверка валидности, семантики, кодировки и т.д.

  1. Обязательно указывайте DOCTYPE. Актуальный - <!DOCTYPE html>
  2. Проверяйте верстку валидаторами HTML и CSS. Актуальный валидатор
  3. Верно заполняйте title сайта, это влияет на поисковую выдачу.
  4. Делайте семантическую верстку - верно используйте теги h1-h6, header, footer, section, article, nav и пр.
  5. Используйте только один h1 на одной странице.
  6. Не забывайте указывать верную кодировку страницы (UTF-8).
  7. Указывайте верный атрибут lang для страницы.
  8. Называйте классы исключительно по назначению элемента title, product, а не по внешнему виду big, red
  9. При верстке используйте только селекторы по классу (исключение - текстовый контент, который потом будет "натягиваться" на CMS).
  10. Удаляйте любые комментарии из html, они лишние.
  11. Любые интерактивные элементы должны работать (переход по ссылке, открытие модального окна и т.д.).
  12. Не верстайте декоративные элементы в html. Для этого существуют псевдоэлементы.
  13. Соблюдайте правила кодстайла html, css, js, вплоть до порядка свойств.
  14. Связывайте лейблы (подписи полей) и инпуты
  15. Для телефона и email используйте ссылку со специальными значениями - :tel и :mailto

CSS-код

Современные технологии, минимализм в коде, БЭМ.

  1. Используйте БЭМ или аналоги даже на небольших проектах. Это позволит верстать быстрее и надежнее.
  2. Как следствие из правила выше - полностью откажитесь от каскада, кроме случаев, когда нужно стилизовать натягиваемый на CMS текст.
  3. Используйте современные технологии (не используем float, работаем с flexbox). Если поддержка браузеров позволяет - используйте CSS Grid.
  4. Соблюдайте рекомендации по организации отступов в верстке. Это поможет избежать непредвиденных отступов при изменении вашей верстки.
  5. Не используйте сброс стилей. Пользуйтесь normalize.css и корректным сбросом box-sizing.
  6. Мелкие различия в одинаковых элементах реализуйте засчет модификаторов в БЭМ.

JS (jQuery)-код

Отсутствие ошибок, корректная работа всего функционала и т.д.

  1. Не используйте прямое изменение стилей через JS, пользуйтесь сменой классов (только если функционал будет работать и без смены стилей).
  2. Удаляйте все console.log() из кода.
  3. Используйте функции для грамотного разделения логики вашего приложения.
  4. Используйте подход DRY (Don`t repeat yourself) - то есть не повторяйте одинаковый код.

Доступность

Удобная работа с клавиатуры, "прослушиваемый" интерфейс.

  1. Делайте интерфейс сайта доступным только с клавиатуры, без мышки.
  2. Тестируйте сайт с помощью скринридера (NVDA, VoiceOver).
  3. Обязательно указывайте alt для картинок по смыслу.
  4. Указывайте aria-атрибуты для реализации доступности (например, атрибут aria-label для интерактивных элементов без описания).
  5. Управляйте фокусом внутри сайта. Например, при открытии модального окна, фокус должен находиться только в нем.

Общие требования

Общие требования по юзабилити и проекту

  1. Правильно организуйте структуру папки: все стили в папку css, скрипты в js и т.д.
  2. Делайте логотип ссылкой. На главной странице сайта у логотипа не нужно указывать href.
  3. Обязательно добавляйте состояния :hover, :active, :focus
  4. Используйте cursor: pointer для интерактивных элементов.
  5. Добавляйте favicon на страницу.
  6. Для ссылок на внешние ресурсы указывайте target="_blank"
  7. "Типографьте" и "Орфографьте" текст с помощью Типографа и Орфографа.
  8. Оптимизируйте скорость загрузки сайта (сжатие, конкатенация и т.д.).
  9. Делайте подписи в формах для всех полей (или placeholder), а также корректные обозначения ошибок при неверном вводе.
  10. При отправке данных асинхронно предусмотрите ответы при ошибке и успешной отправке.
  11. Если изображений на странице много - используйте lazyload.

Внешний вид

Требования по внешнему виду вашей верстки

  1. Соблюдайте соответствие макету. Если заказчик требует Pixel Perfect - расхождение с макетом не должно быть более 3х пикселей. Проверять Pixel Perfect удобно через расширение
  2. Делайте верстку кроссбраузерной. Сайт должен выглядеть идентично в браузерах Chrome, Opera, Safari, Edge, Firefox (при особых требованиях - и в IE11).
  3. Тестируйте свою верстку на переполнение как текстом, так и новыми блоками.

Адаптивная верстка

Требования к отображению на разных размерах.

  1. Делайте ваши сайты аккуратными и доступными для пользователя на любой ширине устройства от 320 и выше.
  2. По возможности используйте только безопасные брейкпоинты.
  3. Делайте изображения адаптивными: {max-width:100%; height:auto;}
  4. Проверяйте вашу верстку на пригодность с помощью теста.