HTML
Руководство по работе с HTML.
Вся информация основана на большом опыте и закреплена источниками: https://html.spec.whatwg.org/ и https://developer.mozilla.org/, а также https://docs.gitlab.com/ee/development/fe_guide/style/html.html
Семантическая вёрстка
Семантические элементы - HTML-теги, которые придают семантическое (а не презентационное) значение содержащимся в них данным. Например:
<article>
<nav>
<strong>
<aside>
Лучше использовать семантические теги, но только в том случае, если намерение действительно соответствует семантическому значению самого тега. Посмотри документацию MDN, чтобы узнать, что семантически означает каждый тег.
Кнопки
Теги кнопок требуют атрибута type
в соответствии со спецификацией W3C HTML.
Ссылки
_blank
Не рекомендуется произвольно открывать ссылки в новой вкладке, поэтому при добавлении к ссылкам target="_blank"
. Интересная статья по ссылкам: Link Targets and 3.2.5.
При использовании target="_blank"
с тегами необходимо также добавить атрибут rel="noopener noreferrer"
. Это предотвращает уязвимость безопасности, задокументированную JitBit.
Фейковые ссылки
Не используйте поддельные ссылки. Если ссылка вызывает только обработчики событий кликов JavaScript, то используйте тег кнопки. Это будет семантично.
Атрибут Role
Не используйте role. Вместо этого используйте семантические элементы HTML, которые итак играют определенную роль.
Комментарии
Всегда используй закрывающие комментарии для блочных НЕ семантических элементов. С этим прекрасно помогает плагин Emmet и настройка "auto_comment".
Благодаря таким закрывающим комментарием, проще изучать и поддерживать вёрстку.
БЭМ
Использование БЭМ у нас - обязательное условие!
В именовании классов не используйте бизнес-логику! Вы должны называть элементы так, как их принято называть на английском языке по прямому назначению.
Например:
.field
- поле ввода.upload
- поле загрузки файлов.menu
- меню.tabs
- вкладки.table
- таблица
Блоки и элементы мы именуем как и принято в БЭМ. Модификаторы мы пишем через два тире (.notify--success
).
Last updated