Требования к верстке live-превью
Привет! В этой статье я хочу рассказать о том, какие требования предъявляются к live-превью наших участников. Перед тем, как отправить работу на проверку, убедитесь, что ваш сайт им соответствует.
GitHub
Сайт принимает работы только по ссылкам GitHub, поэтому обязательно разместите свою верстку там, чтобы прислать ссылку.
Автоматически проверяемые требования
Перед отправкой обязательно проверьте верстку с помощью следующих сервисов: Валидатор и Проверка БЭМ. ВАЖНО: Сервис проверки БЭМ не указывает на ошибки, связанные с элементами от элемента (block__elem__elem), однако это считается ошибкой.
Требования к HTML
- Декоративные элементы желательно делать с помощью CSS, а не HTML. Статья на тему.
- Соблюдена семантика
- Классы имеют осмысленные имена на английском языке (не транслитом).
Требования к CSS
- В селекторах CSS отсутствует каскад (вложенность).
- Также в селекторах отсутствуют стили по тегам. Исключение:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}
body {
font-family: "OpenSans", sans-serif;
font-weight: 400;
}- Не используется директива! important
Внешний вид
- Верстка похожа на макет (Pixel Perfect не обязателен)
- Верстка проходит проверку переполнением (и текст, и блоки)
- Верстка одинаково отображается во всех современных браузерах
- У всех элементов есть состояния (: focus, : hover, : active), если они предусмотрены в макете. Если нет — можно добавить самостоятельно по желанию. И обязательно должна быть плавность состояний.
Доступность
- Реализована базовая доступность (осмысленные alt, подписи к «пустым» элементам через aria-label).
Эти требования помогут и вам делать верстку лучше, и тем, кто будет пользоваться превью, поможет смотреть действительно хорошо сверстанный продукт. Все в выигрыше!
Спасибо всем, кто присылает превью, это очень важная вещь, которая помогает всем нам развиваться!