30 советов для начинающего FrontEnd программиста

В данном репозитории собраны 30 советов для новичков во FrontEnd сфере, которые возможно сделают ваш код чище и приятнее. Все советы постарался написать понятным языком, чтобы даже самый зелёный новичок всё понял 🙂

Правила введения кода для HTML

1. В заголовке тега article должен использоваться тег h1. Его можно использовать сколько угодно раз, как и все «h» теги. h2 нужен для заголовков или подзаголовков. Теги h3 и h4 нужны для названия рубрик и тд в sidebar. А h5 и h6 нужны для мелких элементов страницы, которые нужно отделить от остального текста.

2. Не указывать протокол «http:» в ссылках на внешние элементы.

3. details и summary используются для разметки сворачиваемого раздела содержимого. Тег summary используется для выделения заголовка раздела, а тег details используется для выделения самого содержимого.

4. Семантический тег mark используется для выделения текста, который был выделен по какой-либо причине.

5. Теги div и span не являются семантическими тегами, поэтому нужно стараться их не использовать.

6. Не указывать атрибут «type» при подключении стилей и скриптов.

Правила введения кода для CSS

6. Надо избегать селекторов, которые являются или включают в себя html теги.

7. По возможности писать сокращённые записи свойств (например, вместо padding-left, padding-top и тд, писать значения в padding).

8. Не указывать единицы измерений для нулевых значений (например, вместо margin: 0px, нужно писать margin: 0).

9. Не ставить 0 в целой части в значениях между -1 и 1 (т.е, вместо, например, 0.5em, писать .5em).

10. Не использовать кавычки в ссылках.

11. Сортировать объявления в CSS по алфавиту.

12. Стараться использовать BEM для CSS.

Правила введения кода для HTML и CSS

14. Всегда использовать 2 пробела для отступов.

15. По возможности пояснять свой код комментариями.

Доступность:

16. Сделать элементы видео доступными для людей с ограниченными возможностями.

17. Для фокуса на определённые элементы существует атрибут tabindex. Он полезен, когда нужно обеспечить доступность для пользователей, использующих только клавиатуру.

18. Для пользователей экранной лупы есть 3 правила для контента, который появляется при наведении:

    1. Контент можно отклонить без перемещения фокуса или курсора (например, с помощью Esc).

    2. Курсор можно перевести с кнопки на появляющийся контент и при этом он не исчезает.

    3. Появляющийся дополнительный контент остаётся видимым, пока фокус или курсор не убрали с кнопки или дополнительного контента либо пока пользователь не отклонит контент клавишей Esc.

19. Атрибут Aria-label помогает присвоить элементу заголовок, который видим исключительно программам чтения с экрана. Атрибут Aria-labelledby позволяет сделать так, чтобы скринридер при фокусе на элемент читал другое видимое название или заголовок.

20. Aria-describedby позволяет предоставить дополнительную информацию для скринридера к имеющемуся видимому заголовку.

21. Aria-disabled позволяет включить неактивный элемент в порядок следования фокуса. Значит, для пользователя со скринридера этот элемент как бы не будет существовать.

22. Роль «alertdialog» позволяет вспомогательным технологиям и браузеру распознать выскакивающие окно предупреждения или сообщения об ошибке и озвучить его появление специальным образом, например проиграв системный звук предупреждения.

23. Фокус может находиться только на интерактивных элементах, т.е. кнопках, ссылках, чекбоксах и т.д. Порядок следования фокуса должен соответствовать визуальному или логическому порядку расположения интерактивных элементов на экране. Неактивные элементы управления не фокусируются.

24. Чтобы посмотреть то, как элемент должен ввести себя при работе с клавиатуры, стоит посмотреть раздел ‘Design Patterns and Widgets’.

25. Стоит указывать основной язык каждой страницы, используя, например, lang атрибут в html lang=»en».Нужно использовать lang атрибут для определённых элементов, когда язык элемента отличается от остальной части страницы.

26. Роли WAI-ARIA могут придать дополнительный смысл коду, например, используя role=»search» для определения функциональности поиска.

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

28. Стоит убедиться, что порядок элементов в коде соответствует логическому порядку представленной информации. Один из способов проверить это — удалить стиль CSS и убедиться, что порядок содержимого имеет смысл.

29. Следует использовать отзывчиво-адаптивный дизайн сайта.

30. Используйте WAI-ARIA для предоставления информации о функциях и состоянии пользовательских виджетов, таких как аккордеоны и кнопки, изготовленные на заказ. Например, role=»navigation» и aria-expanded=»true» (aria-expanded устанавливается для элемента, чтобы указать, развёрнут элемент управления или свёрнут, и отображаются ли контролируемые элементы или скрыты).