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

html-css-rules.md

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

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.

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