Которые применяются относительно к нашей верстке, или верстке предоставленной заказчиком.
- Визуальное совпадение с макетом. Расхождение не больше 5px, в крайнем случае 10.
- Отступы табами (не пробелами)
- Сравнивается относительное положение элементов (друг относительно друга, а не макета, как картинки)
- Не должно быть больших каскадов стилей (больше 3, либо таких, в которых фигурирует класс обертки).
- Не должно быть !important в основном файле стилей
- Логотип – картинкой со ссылкой. Ведет на главную страницу
- Главная страница index.html (не main, не home)
- Никаких пре-постпроцессоров и минификаторов
- Отступы в пикселях. Шрифты в пикселях. Никаких pt em и прочего. Проценты можно.
- Такие свойства как width и height должны использоваться крайне редко.
- Картинки, все, которые не контент – в спрайте. Стрелочки, закавычки, любая картинка которая интерфейс. Все они в спрайте. Со всех страниц в одном спрайте.
- Кнопки имеют класс, который позволяет его применить к любому из тегов: input, div, button, a.
- Все тексты на сайте могут быть большими, маленькими, отсутствовать. Рыба, которую вставил дизайнер вместо текстов – будет совершенно другого размера на реальном сайте.
- Все картинки могут отсутствовать и ничего не должно разваливаться.
- Картинки могут быть неадекватного размера – тоже должно работать. Если есть сомнения как резать кратинку – лучше спросить.
- Если есть шрифт GothamProBold GothamProRegular – это все один font-family. Есть font-weight и font-style чтобы их различить.
- Добавление оберток (div, form) не должно влиять на верстку.
- Использовать float для выравнивания – плохо. Если все-таки пришлось – должен быть clearfix обязательно.
- Наименование классов должно описывать внешний вид, а не функциональное назначение элемента
- id используется если этот элемент ВСЕГДА будет один на странице, даже если потоп – их не станет 2. И только для использования в js, никаких стилей на id.
- В любом меню количество элементов может изменяться. Особенно увеличиваться.
- В любом меню должен быть active элемент (когда пользователь находится на странице этого пункта меню, часто совпадает с hover)
- Всем активным элементам должен быть дописан hover. Если его нет в макете – либо спросить, либо придумать (возможно не подойдет заказчику)
- Основной файл стилей должен быть подключен самым последним в списке
- Скрипты подключены перед </body> и основной файл скриптов подключен последним.
- flex-box пока нельзя.
- Если есть минимальное разрешение (макет не адаптивен) полоса прокрутки не должна появляться на разрешениях выше него ни в каких ситуациях.
- Гигантские картинки не должны ничего ломать
- Картинки не должны непропорционально тянуться
- В консоли не должно быть ошибок
- Изначальный html должен формироваться без использования js (исключение – слайдеры и плагины всякие, над которыми нет власти). Т.е. никаких изменений DOM в стиле init(). При медленном инете верстка должна загружаться без прыжков. Прыжки – это когда html отрисовался – потом подгружается js который его меняет.
- На телефоне должно работать. Это не относится к адаптивности верстки – на телефоне есть зум, часто телефоны еще и тексты в столбик складывают для удобства просмотра (это если использовать теги по их прямому назначению).
- <br> может использовать только менеджер при наполнении сайта контентом. Никак не верстальщик.
- calc() нельзя
- Верстаем под новые браузеры (выпущенные в прошлом году)