Требования к верстке

Которые применяются относительно к нашей верстке, или верстке предоставленной заказчиком.

  1. Визуальное совпадение с макетом. Расхождение не больше 5px, в крайнем случае 10.
  2. Отступы табами (не пробелами)
  3. Сравнивается относительное положение элементов (друг относительно друга, а не макета, как картинки)
  4. Не должно быть больших каскадов стилей (больше 3, либо таких, в которых фигурирует класс обертки).
  5. Не должно быть !important в основном файле стилей
  6. Логотип – картинкой со ссылкой. Ведет на главную страницу
  7. Главная страница index.html (не main, не home)
  8. Никаких пре-постпроцессоров и минификаторов
  9. Отступы в пикселях. Шрифты в пикселях. Никаких pt em и прочего. Проценты можно.
  10. Такие свойства как width и height должны использоваться крайне редко.
  11. Картинки, все, которые не контент – в спрайте. Стрелочки, закавычки, любая картинка которая интерфейс. Все они в спрайте. Со всех страниц в одном спрайте.
  12. Кнопки имеют класс, который позволяет его применить к любому из тегов: input, div, button, a.
  13. Все тексты на сайте могут быть большими, маленькими, отсутствовать. Рыба, которую вставил дизайнер вместо текстов – будет совершенно другого размера на реальном сайте.
  14. Все картинки могут отсутствовать и ничего не должно разваливаться.
  15. Картинки могут быть неадекватного размера – тоже должно работать. Если есть сомнения как резать кратинку – лучше спросить.
  16. Если есть шрифт GothamProBold GothamProRegular  – это все один font-family. Есть font-weight и font-style чтобы их различить.
  17. Добавление оберток (div, form) не должно влиять на верстку.
  18. Использовать float для выравнивания – плохо. Если все-таки пришлось – должен быть clearfix обязательно.
  19. Наименование классов должно описывать внешний вид, а не функциональное назначение элемента
  20. id используется если этот элемент ВСЕГДА будет один на странице, даже если потоп – их не станет 2. И только для использования в js, никаких стилей на id.
  21. В любом меню количество элементов может изменяться. Особенно увеличиваться.
  22. В любом меню должен быть active элемент (когда пользователь находится на странице этого пункта меню, часто совпадает с hover)
  23. Всем активным элементам должен быть дописан hover. Если его нет в макете – либо спросить, либо придумать (возможно не подойдет заказчику)
  24. Основной файл стилей должен быть подключен самым последним в списке
  25. Скрипты подключены перед </body> и основной файл скриптов подключен последним.
  26. flex-box пока нельзя.
  27. Если есть минимальное разрешение (макет не адаптивен) полоса прокрутки не должна появляться на разрешениях выше него ни в каких ситуациях.
  28. Гигантские картинки не должны ничего ломать
  29. Картинки не должны непропорционально тянуться
  30. В консоли не должно быть ошибок
  31. Изначальный html должен формироваться без использования js (исключение – слайдеры и плагины всякие, над которыми нет власти). Т.е. никаких изменений DOM в стиле init(). При медленном инете верстка должна загружаться без прыжков. Прыжки – это когда html отрисовался – потом подгружается js который его меняет.
  32. На телефоне должно работать. Это не относится к адаптивности верстки – на телефоне есть зум, часто телефоны еще и тексты в столбик складывают для удобства просмотра (это если использовать теги по их прямому назначению).
  33. <br> может использовать только менеджер при наполнении сайта контентом. Никак не верстальщик.
  34. calc() нельзя
  35. Верстаем под новые браузеры (выпущенные в прошлом году)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *