35 lines
4.4 KiB
Markdown
35 lines
4.4 KiB
Markdown
# Требования к верстке
|
||
|
||
|
||
## С точки зрения веб-разработки:
|
||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
|
||
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
|
||
`block-name__elem-name--mod-name--mod-val`
|
||
+ имена записываются латиницей в нижнем регистре
|
||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__)
|
||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--)
|
||
+ значение модификатора отделяется от его имени двумя дефисами (--)
|
||
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
||
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила -->
|
||
|
||
|
||
## С точки зрения SEO:
|
||
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
|
||
* на странице должен быть только один заголовок первого уровня (h1)
|
||
* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
|
||
* для кнопок, нажатие на которые не требует редиректа используем тег \<button\>, а не \<a\>
|
||
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке
|
||
|
||
|
||
## Оптимальный порядок действий
|
||
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css
|
||
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
|
||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html"
|
||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css
|
||
|
||
|
||
### Примечания
|
||
|
||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |