FAQ

Чеклист

1. На всех страницах в любом состоянии при нормальном разрешении не должно быть горизонтального скролла.
2. По возможности используем CDN для библиотек.
3. Якорь. Если ссылка указывает не на конкретную страницу, а на какой-либо блок на странице, по клику на ссылку страница должна позиционироваться таким образом, чтобы нужный блок находился в зоне видимости. Расстояние от верхней части монитора до начала блока должно быть не менее 60px.
4. Сверстанная страница должна полностью соответствовать макету: расположение элементов, отступы между ними, цвета и т.д. Проверять с помощью плагина "Pixel Perfect" для браузеров. Максимальная погрешность не более 1-2px.
5. При наведении курсора между строчками ссылки не должно теряться наведение.
6. Реагирование при наведение курсора (элементы подсвечиваются, курсор изменяется на палец).
7. Сайт корректно отображается при включенном AdBlock, верстка не ломается, внутренние блоки сайта не обрезаются, не исчезают.
8. Футер должен быть прижат к низу страницы
9. НЕ используем теги без их семантической принадлежности:
   • Если ссылка не является ссылкой (href="") не используем тег<a>
   • Нельзя использовать тегaбезhref
10. Если список не выглядит как список, не используем теги<ul> (<ol>) и<li> и т.д.
11. Тег<h1> обязательно должен присутствовать на странице и только один. На главной странице он может и не быть.
12. В заголовках блоков используем тег<h2>
13. При необходимости добавляем класс для страницы в тегеbody
    • для главнойfront
    • для другихnot-front
    • для обозначения что эта за страницаpage-НАЗВАНИЕ-СТРАНИЦЫнапример: `page-catalog` для страницы каталога
14. Ссылки на внешние ресурсы и чужие сайты должны открываться во новой вкладкеtarget="_blank", а также иметь атрибут rel="nofollow"
15. НЕ используем в тегахID="", за исключением использования якорей: Идентификаторы устарели.
    — Использование идентификаторов делает невозможным дублирование кода.
    — Использование идентификаторов делает код невалидными при невнимательности.
16. При добавлении фоновой картинки под блок, ОБЯЗАТЕЛЬНО указывать цветbackground-color
    Недопускать чтобы цвет текста совпадал с цветом фона блока.

17. У всех изображений должны быть стили

                  img {
      max-width: 100%;
      height: auto;
    }
                

18. НЕ используем!important без крайней необходимости.
19. НЕ используем краткое написание свойствbackground иfont
    Например,background: red изменяет не один, а сразу 10 стилей, включаяbackground-color,background-size,background-repeat и другие.
20. Плавность анимаций вtransiton 0.2s — 0.3s
21. Вложенность стилей (желательно) не более 3 уровня
22. Написание имен классов строго в нижнем регистре.

23. ЗАПРЕЩЕНО:

    • Танслит

      НЕ правильно: `.verhnee-menu`
      Правильно: `.menu-top`

    • Артикли

      НЕ правильно: .member-of-the-team
      Правильно: .team-member

    • Верхний регистр

      НЕ правильно: .headerTopMenu
      Правильно: .header-top-menu

24. Переменные scss:

    • Для имен переменных необходимо использовать правильные английские слова без артиклей в единственном числе.
    • Написание имен переменных строго в нижнем регистре.
    • Разделитель между словами символом нижнего подчеркивания_
    • Именование переменных необходимо начинать со слова-префикса в котором указывается назначение переменной.

      Например:
      $font_text
      $color_hover
      $grid_hover и т.д.

25. Уtextarea задатьresize: none
26. Уinput[type='text'],input[type='password'],input[type='email'],textarea по-умолчанию задатьoutline: none,width: 100%,@include placeholder() {}