Skip to content

Latest commit

 

History

History
35 lines (33 loc) · 3.27 KB

README.md

File metadata and controls

35 lines (33 loc) · 3.27 KB
Raw

Best Practices

HTML

  • Иерархия в контенте должна быть: box, box__row, box__col
    • box - ограничивает максимальную ширину контента
    • box__row — ставит элементы содержимого в ряд. на уменьшение размера экрана срабатывает свойство wrap - переносит не входящие в область элементы на другую строку.
    • box__col — колонки (как правило наиболее гибкая разметка колонок в количестве 12-ти). Для адаптива используем box__col_md(xs/sm/lg)_кол-во колонок.

      Два блока будут разделены на две колонки и встанут в ряд. Начиная с минимального размера экрана, колонки будут в соотношении 50% к 50%, то есть две равные друг другу колонки (12 (кол-во колонок) делим пополам).

      <div class="box">
  <div class="box__row">
    <div class = "box__col box__col_xs_6" >FIRST BLOCK</div>
    <div class = "box__col box__col_xs_6" >SECOND BLOCK</div>
  </div>
</div>
  • svg:
    • Убираем ненужные стили;
    • Убираем <g>;
    • Заменяем цвет на currentColor;
    • Убираем высоту/ширину;
    • Если все элементы красятся через одно и, то же свойство (fill/stroke), то currentColor только у корневого тега svg, а у элементов убрать.
  • Карточки нужно делать сразу с разным наполнением (минимум/средне/максимум) и вставлять разные картинки, обязательно с разными размерами и разным соотношением сторон.
  • inline-блоки <название-компонента>-<название-блока>.

    modules/shop/map блок заголовка: shop-map-header.

  • Для внешних ссылок нужно указывать target="_blank" rel="nofollow noopener"
  • Нельзя использовать href="#"
  • Компонент должен иметь возможность принимать внешние параметры и кастомизироваться. Никаких "вшитых" значений.
  • Все элементы с текстом, контент которых формируется динамически, проверяем на то, чтобы они не ломались при большем/меньшем количестве текста, чем в макете.
  • Не вставлять блочные элементы внутрь инлайновых.
  • h1 должен встречаться в одной странице только один раз.
  • У каждой страницы должны быть теги title и мета теги keywords, description.
  • Не использовать id, кроме случаев, когда они необходимы.