Рекомендации по верстке для Битрикс

1. Прописывать заголовки страниц тегом H1. Также для других заголовков желательно использовать H2,H3 и т.д.
2. Не применять наследуемых и общих(для конкретной части сайта) стилей.
   Вместо
   

   		#all #header div {
   			// текст стиля
   		}
   		

   нужно использовать отдельный класс, например:

   		div.some-uniq-class{
   			// текст стиля
   		}
   		

   Это нужно для того, что бы для внутренних аналогичных тегов без классов данный стиль НЕ применялся.
   Если для элемента нужен определенный стиль, писать его только для этого элемента. Объекты в контентной области должны иметь персональные стили (классы, id желательно не использовать) и не должны наследовать визуальное представление (цвет, рамки, отступы) от других элементов. Это необходимо, чтобы была возможность вставки объекта со стандартным форматированием (например, таблица без фона). То есть, если таблица в контенте должна иметь определенный внешний вид, то для этой таблицы в CSS должен существовать свой стиль .mycustomtable.
3. Если на странице выводятся элементы, предназначенные для отправки данных (формы поиска, отправка заявки, везде, где есть кнопка Отправить или Сохранить или Забубенить) нужно верстать с применением тега FORM. То есть тег должен присутствовать в верстке.
4. Контентная область страницы по возможности НЕ должна содержать разных идентификаторов (id) и классов для разных страниц.
5. Верстка любого блока НЕ должна зависеть от контента, находящегося в нем. Если в эскизе в блоке стоит 3 строки текста, то это не означает, что в него нельзя поставить 5 строк текста. При изменении (увеличении и уменьшении) контента любого блока, размер этого блока должен изменяться в зависимости от содержимого.
6. Использовать изображения формата JPEG только там, где их применение оправдано (фотографии, клипарты с большим количеством цветов, длинные градиенты). Во всех остальных случаях (бэкграунды кнопок, кастомные точки списков, стрелочки, символизирующие направления сортировки указатели, логотипы) следует применять GIF, PNG, PNG с альфа-каналом.
7. В файлах css НЕ использовать автоматическую подстановку русских слов, например:

   a:before {content:'Страница '}

   Потому что сайт может быть на нескольких языках, а файл css — один.
   Данная рекомендация касается и файлов javascript, в них так же не нужно использовать строковых констант на русском языке.
8. Все элементы переключения блоков должны выполняться ссылками, а не радиопереключателями. Радиопереключатели применяются только в явных блоках фильтрации и поиска.

9. Элементы управления, относящиеся к одному функциональному блоку, должны находиться в одном блоке вёрстки, а не раскиданы по странице в разных блоках вёрстки.

   Пример. Имеется страница корзины. Красное выделение - область заголовка страницы (часть шаблона сайта). Зеленая область - блок корзины (шаблон компонента).

   

   Неправильно:

   

   Правильно:

   

10. Во всех типах меню предусмотреть активные пункты. Нужно сделать выделенные пункты меню, когда находимся на выбранной странице.
11. z-index должно быть меньше 1000 у всех элементов (больше 1000 используется служебными элементами Битрикс).
12. При стилизации стандартных элементов управления необходимо использовать для этого в CSS отдельные классы.
    Ни в коем случае не делать что-то подобное:

    		select { display:none;}
    		input[type=radio] {display:none;}
    		

    Нужно помнить, что у Битрикса есть публичный интерфейс управления содержимым сайта, в котором используются стандартные элементы управления.

+ можно глянуть вот в этот список https://github.com/Salerman/bitrix_coder_checklist

← Вернуться к списку заметок