В данном репозитории собраны 30 советов для новичков во FrontEnd сфере, которые возможно сделают ваш код чище и приятнее. Все советы постарался написать понятным языком, чтобы даже самый зелёный новичок всё понял :)
Правила введения кода для HTML
В заголовке тега article должен использоваться тег h1. Его можно использовать сколько угодно раз, как и все "h" теги. h2 нужен для заголовков или подзаголовков. Теги h3 и h4 нужны для названия рубрик и тд в sidebar. А h5 и h6 нужны для мелких элементов страницы, которые нужно отделить от остального текста.
Не указывать протокол "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).
Не использовать кавычки в ссылках.
Сортировать объявления в CSS по алфавиту.
Стараться использовать BEM для CSS.
Правила введения кода для HTML и CSS
Всегда использовать 2 пробела для отступов.
По возможности пояснять свой код комментариями.
Доступность:
Сделать элементы видео доступными для людей с ограниченными возможностями.
Для фокуса на определённые элементы существует атрибут 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 и убедиться, что порядок содержимого имеет смысл.
Следует использовать отзывчиво-адаптивный дизайн сайта.
Используйте WAI-ARIA для предоставления информации о функциях и состоянии пользовательских виджетов, таких как аккордеоны и кнопки, изготовленные на заказ. Например, role="navigation" и aria-expanded="true" (aria-expanded устанавливается для элемента, чтобы указать, развёрнут элемент управления или свёрнут, и отображаются ли контролируемые элементы или скрыты).
