В данном репозитории собраны 25 советов для новичков-верстальщиков, которые возможно сделают ваш код чище и приятнее.
Правила введения кода для HTML
Тег h1 является самым главным на странице и используется в качестве названия раздела или статьи. h2 стоит использовать для заголовков или подзаголовков (но также рекомендуется использовать сочетание подходящего по иерархии
h*,pиhgroup) Теги h3 и h4 нужны для названия рубрик и тд в разделе "sidebar". А h5 и h6 нужны для мелких элементов страницы, которые нужно отделить от остального текста (Но также, для мелкого поясняющего текста есть элементsmall).Не указывать протокол "http:" в ссылках на внешние элементы.
Для разметки сворачиваемого раздела содержимого стоит использовать теги details и summary. Тег summary используется для выделения заголовка раздела, а тег details используется для выделения самого содержимого.
Семантический тег mark используется для выделения текста, который был выделен по какой-либо причине.
Теги div и span не являются семантическими тегами, поэтому нужно стараться их не использовать.
Не указывать атрибут "type" при подключении стилей.
При необходимости пояснять свой код комментариями.
Правила введения кода для CSS
Стараться избегать селекторов, которые являются или включают в себя html теги для лучшей читаемости кода.
По возможности писать сокращённые записи свойств:
Например, вместо "padding-left", "padding-top" и тд, писать все значения в "padding".Не указывать единицы измерений для нулевых значений:
Например, вместо "margin: 0px", нужно писать "margin: 0".Не ставить 0 в целой части в значениях между -1 и 1:
т.е, вместо, например, "0.5em", писать ".5em" без нуля.Не использовать кавычки в ссылках.
Стараться использовать BEM для CSS.
Доступность
Если на вашем сайте имеются элементы видео, то стоит сделать их доступными для людей с ограниченными возможностями.
Для фокуса на определённые элементы существует атрибут tabindex. Он полезен, когда нужно обеспечить доступность для пользователей, использующих только клавиатуру.
Для пользователей экранной лупы есть 3 правила для контента, который появляется при наведении:
Контент можно отклонить без перемещения фокуса или курсора (например, с помощью Esc).
Курсор можно перевести с кнопки на появляющийся контент и при этом он не исчезает.
Появляющийся дополнительный контент остаётся видимым, пока фокус или курсор не убрали с кнопки или дополнительного контента либо пока пользователь не отклонит контент клавишей Esc.
При необходимости используйте данные атрибуты для обеспечения большей доступности:
Aria-label помогает присвоить элементу заголовок, который видим исключительно программам чтения с экрана.
Aria-labelledby позволяет сделать так, чтобы скринридер при фокусе на элемент читал другое видимое название или заголовок.
Aria-describedby позволяет предоставить дополнительную информацию для скринридера к имеющемуся заголовку.
Aria-disabled определяет состояние, которое отражает активность/неактивность виджета. Значит, можно сделать так, чтобы для пользователя со скринридера этот элемент как бы не существовал.
Роль "alertdialog" позволяет вспомогательным технологиям и браузеру распознать выскакивающие окно предупреждения или сообщения об ошибке и озвучить его появление специальным образом, например проиграв системный звук предупреждения. Старайтесь помнить об этом при улучшении доступности для своей вёрстки.
Фокус может находиться только на интерактивных элементах, т.е. кнопках, ссылках, чекбоксах и т.д. Порядок следования фокуса должен соответствовать визуальному или логическому порядку расположения интерактивных элементов на экране. Неактивные элементы управления не фокусируются.
Чтобы посмотреть то, как элемент должен ввести себя при работе с клавиатуры, стоит посмотреть раздел ‘Design Patterns and Widgets’.
Стоит указывать основной язык каждой страницы, используя, например, lang атрибут в html lang="en".Нужно использовать lang атрибут для определённых элементов, когда язык элемента отличается от остальной части страницы.
Роли WAI-ARIA могут придать дополнительный смысл коду, например, используя role="search" для определения функциональности поиска.
Нужно предоставить чёткие инструкции, сообщения об ошибках и уведомления, чтобы помочь пользователям заполнять формы на вашем сайте.
Стоит убедиться, что порядок элементов в коде соответствует логическому порядку представленной информации. Один из способов проверить это - удалить стиль CSS и убедиться, что порядок содержимого имеет смысл.
Следует использовать отзывчиво-адаптивный дизайн сайта.
Полезные статьи
Полезная информация про доступность сайтов - Доступный дизайн компонентов на примерах. Дизайнеру про ARIA-атрибуты, порядок фокуса и другое / Хабр
Информация про z-index - Свойство z-index: принцип работы — учебник CSS.
Советую почитать и разобраться в этой теме, т.к свойство "z-index" работает не так просто, как может показаться на первый взгляд.Несколько хороших советов для улучшения производительности вашего сайта - High performance HTML | Sam Dutton’s blog
Пригодиться при создании своего собственного сайта/вёрстки без макета - Как правильно выбрать цвета для сайта? Что такие цветовые схемы для сайта?
Используйте официальные валидаторы от W3C для улучшения вашего кода:
The W3C Markup Validation Service - для HTML кода;
The W3C CSS Validation Service - для CSS кода.
