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

## 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](https://validator.w3.org/nu/);
15. Верстка не должна "валиться" при добавлении и удалении блоков, при добавлении большого контента;
16. Блоки должны свободно перемещаться по странице или дублироваться на других;
17. Тестировать верстку;
18. Проверять верстку на случай ошибки при загрузке CSS и картинок;
19. Рекомендуется придерживаться компонентного подхода. Для примера - БЭМ. Но БЭМ это не догма.

## CSS

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

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