zoxon
7/12/2016 - 4:17 AM

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

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

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

HTML

  1. Форматировать код;
  2. Использовать HTML5 теги;
  3. Семантически называть значения у атрибутов(class, name и т.п);
  4. Запрещается транслит(.hapka, .tovar). Можно заменить на .header, .product;
  5. Запрещается сокращать селекторы(.cb, .acc). Можно заменить на .checkbox, .accordion;
  6. Не допускается вложение блочного элемента в строчный. Например, тега заголовка(h1-h6) в ссылку;
  7. Использовать теги согласно спецификации. Например, <div class="title">Заголовок 3 уровня</div> нужно заменить на <h3 class="title">Заголовок 3 уровня</h3>;
  8. Теги article, section обязательно должны иметь заголовки(h1-h6);
  9. Тег nav должен содержать ссылки только на разделы сайта или разделы внутри одной страницы. Например, верстка пагинации с помощью nav будет являться ошибкой;
  10. Для тегов input указывать атрибут name;
  11. Использовать современные значения type для тега input;
  12. Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег img использовать для верстки изображений в контенте с обязательным атрибутом alt;
  13. Запрещается явно указывать внешние параметры в названии селектора. Например, <a href="#" class="link-green">. Можно заменить на <a href="#" class="link link-green">. В классе link указать основные свойства для ссылки. Например, размер шрифта. А класс link-green использовать для верстки «зеленых» ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
  14. Проверять верстку через W3C validator;
  15. Верстка не должна «валиться» при добавлении и удалении блоков, при добавлении большого контента;
  16. Блоки должны свободно перемещаться по странице или дублироваться на других;
  17. Тестировать верстку;
  18. Проверять верстку на случай ошибки при загрузке CSS и картинок;
  19. Рекомендуется придерживаться компонентного подхода. Для примера - БЭМ. Но БЭМ это не догма.

CSS

  1. Порядок каскадов должен соответствовать порядку тегов в HTML;
  2. Разделять стили на несколько слоев. Например, первый слой - сброс стилей и установка стилей для основных элементов (ссылки, параграфы, заголовки и т.д). Второй слой - это элементы для каркаса сайта (шапка, сайдбары, контент, подвал). Третий слой - это компоненты страницы (меню, карточка товара и т.д);
  3. Устанавливать базовый шрифт в селекторе body {};
  4. Запрещается использовать индификатор(id) в качестве селектора. Рекомендуется использовать селекторы классов. За исключением установки свойств для основных элементов(ссылки, списки, параграфы и.т.п);
  5. Вложенность селектора не должна превышать два простых селектора. Например, не рекомендуется делать такие селекторы - .menu .menu-list a;
  6. Комментировать основные блоки;
  7. Устанавливать свойства для :focus, :active, :visited;
  8. Запрещается использовать !important.

Самое главное правило - думать головой! :)