Требования к верстке live-превью

Привет! В этой статье я хочу рассказать о том, какие требования предъявляются к live-превью наших участников. Перед тем, как отправить работу на проверку, убедитесь, что ваш сайт им соответствует.

Автоматически проверяемые требования

Среди этих вещей две важных: проверка валидатором и проверка БЭМ. Делается это двумя сервисами: Валидатор и Проверка БЭМ. ВАЖНО: Сервис проверки БЭМ не указывает на ошибки, связанные с элементами от элемента (block__elem__elem), однако это считается ошибкой.

Требования к HTML

1. Декоративные элементы желательно делать с помощью CSS, а не HTML. Статья на тему.
2. Соблюдена семантика
3. Классы имеют осмысленные имена на английском языке (не транслитом).

Требования к CSS

1. В селекторах CSS отсутствует каскад (вложенность).
2. Также в селекторах отсутствуют стили по тегам. Исключение:

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;
}

3. Не используется директива !important

Внешний вид

1. Верстка похожа на макет (Pixel Perfect не обязателен)
2. Верстка проходит проверку переполнением (и текст, и блоки)
3. Верстка одинаково отображается во всех современных браузерах
4. У всех элементов есть состояния (:focus, :hover, :active), если они предусмотрены в макете. Если нет - можно добавить самостоятельно по желанию. И обязательно должна быть плавность состояний.

Доступность

1. Реализована базовая доступность (осмысленные alt, подписи к "пустым" элементам через aria-label).

Эти требования помогут и вам делать верстку лучше, и тем, кто будет пользоваться превью, поможет смотреть действительно хорошо сверстанный продукт. Все в выигрыше!

Спасибо всем, кто присылает превью, это очень важная вещь, которая помогает всем нам развиваться!