- Форматировать код;
- Использовать HTML5 теги;
- Семантически называть значения у атрибутов(class, name и т.п);
- Запрещается транслит(.hapka, .tovar). Можно заменить на .header, .product;
- Запрещается сокращать селекторы(.cb, .acc). Можно заменить на .checkbox, .accordion;
- Не допускается вложение блочного элемента в строчный. Например, тега заголовка(h1-h6) в ссылку;
- Использовать теги согласно спецификации. Например, < div class=”title” >Заголовок 3 уровня< /div > нужно заменить на < h3 class=”title” >Заголовок 3 уровня< /h3 >;
- Теги article, section обязательно должны иметь заголовки(h1-h6);
- Тег nav должен содержать ссылки только на разделы сайта или разделы внутри одной страницы. Например, верстка пагинации с помощью nav будет являться ошибкой;
- Для тегов input указывать атрибут name;
- Использовать современные type для тега input;
- Декоративные элементы (иконки, фоновые изображения) верстать при помощи CSS. Тег img использовать для верстки изображений в контенте с обязательным атрибутом alt;
- Запрещается явно указывать внешние параметры в названии селектора. Например, < a href=”#” class=”link-green” >. Можно заменить на < a href=”#” class=”link link-green” >. В классе link указать основные свойства для ссылки. Например, размер шрифта. А класс link-green использовать для верстки “зеленых” ссылок. Таким образом, в будущем мы уберем конфликты между свойствами;
- Проверять верстку через W3C validator;
- Верстка не должна "валиться" при добавлении и удалении блоков, при добавлении большого контента;
- Блоки должны свободно перемещаться по странице или дублироваться на других;
- Тестировать верстку;
- Проверять верстку на случай ошибки при загрузке CSS и картинок;
- Рекомендуется придерживаться компонентного подхода. Для примера - БЭМ. Но БЭМ это не догма.
- Порядок каскадов должен соответствовать порядку тегов в HTML;
- Разделять стили на несколько слоев. Например, первый слой - сброс стилей и установка стилей для основных элементов (ссылки, параграфы, заголовки и т.д). Второй слой - это элементы для каркаса сайта (шапка, сайдбары, контент, подвал). Третий слой - это компоненты страницы (меню, карточка товара и т.д);
- Устанавливать базовый шрифт в селекторе body {};
- Запрещается использовать индификатор(id) в качестве селектора. Рекомендуется использовать селекторы классов. За исключением установки свойств для основных элементов(ссылки, списки, параграфы и.т.п);
- Вложенность селектора не должна превышать два простых селектора. Например, не рекомендуется делать такие селекторы - .menu .menu-list a;
- Комментировать основные блоки;
- Устанавливать свойства для :focus, :active;
- Запрещается использовать !important.
Самое главное правило - думать головой! :)