CONTRIBUTING.md

CSS

Мы используем БЭМ в международной нотации:

.block
.block--modifier
.block__element
.block__element--modifier

Элементы обозначаются __, модификаторы --, схема ключ-значение в модификаторах не используется.

Работа с изображениями

Декоративная картинка без смысловой нагрузки, alt остаётся пустым:

<img src="…" alt="">

Картинка со смыслом, которая дополняет или иллюстрирует текст. В alt пишется уникальное и ёмкое описание изображения. Избегайте повторения предложений, которые уже есть на странице:

<img src="…" alt="Закатное небо.">

Декоративная картинка с подписью, alt остаётся пустым:

<figure>
    <img src="…" alt="">
    <figcaption>Фото: автор.</figcaption>
</figure>

Картинка с подписью, которая при этом иллюстрирует и дополняет текст. В alt добавляется ёмкое описание, а в <figcaption> дополнительную информацию об изображении: автора, ссылку на оригинал, авторские наблюдения и замечания:

<figure>
    <img src="…" alt="Закатное небо.">
    <figcaption>Фото: автор.</figcaption>
</figure>

Не повторяйте содержимое alt в <figcaption>. Они должны быть уникальными, иначе скринридер два раза объявит один и тот же текст.

В конце описания в alt всегда ставится точка, чтобы помочь скринридеру сделать паузу перед следующим дальше контентом.

Инструменты

• Расширение Nunjucks Template для VS Code