Вёрстка под 1С-Битрикс - это не просто сделать страницу по макету. Готовую вёрстку натягивают на шаблон, а контент дальше правят через визуальный редактор: добавляют абзацы, картинки, таблицы. Если шаблон сверстан без оглядки на это, такие правки ломают вид страницы.
Часть правил со временем устарела (поддержка старых браузеров, отдельные плагины), но Битрикс-специфика осталась прежней. Собрали то, что бережёт разработчику нервы и переделки.
Стили: шаблон отдельно, контент отдельно
- →Два файла стилей. styles.css - для контентной части страницы, template_styles.css - для шаблона. Второй подключается следом и имеет больший приоритет.
- →Тело страницы - в контейнере. Оберните контентную часть в блок с классом (например, main) и применяйте стили только к элементам внутри него: .main p, а не просто p.
- →Стили - через контейнер, а не через классы элементов. Контент-менеджер добавляет абзацы и картинки через редактор без классов. Если стили висят на контейнере и тегах внутри, новый контент оформится правильно сам.
Структура шаблона
- →Один тег h1 на странице - и заголовок h1 вместе с хлебными крошками выносится из тела страницы в шаблон, а не в контентную часть.
- →Одинаковая структура шаблонной части на разных страницах: HTML до контентной части должен быть идентичен - так шаблон собирается из общих частей без сюрпризов.
- →Хлебные крошки (навигационную цепочку) предусматривают сразу.
- →Блок авторизации верстают в двух состояниях: для гостя и для авторизованного пользователя.
Имена и файлы
- →Не используйте классы title и mail - они зарезервированы визуальным редактором Битрикс.
- →Без кириллицы в именах файлов и папок - только латиница, иначе ссылки и подключения ломаются на части серверов.
- →Меню с двумя состояниями пункта: активный и при наведении.
Изображения и списки товаров
- →Картинки в контенте - тегом img, а не фоном: их вставляет и заменяет контент-менеджер через редактор.
- →Изображения в списках - через background-size: cover, чтобы разные пропорции аккуратно вписывались в контейнер фиксированной ширины.
- →Несколько меток на товаре. В карточке и списке заранее предусмотрите место под несколько лычек сразу (хит, скидка, новинка).
- →Список новостей верстают с запасом на жизнь: нет изображения, длинный анонс, обтекание текстом, разные пропорции картинок.
Формы и элементы управления
- →Единое оформление кнопок и ссылок. Стилизованные ссылки-кнопки должны одинаково выглядеть на тегах a, button и input[type=submit].
- →Стилизуйте input[type=file] - штатный вид поля выбора файла портит аккуратную форму.
- →Поле капчи предусматривают в формах обратной связи и регистрации.
- →Удалённые баннеры не оставляют дыр. Если блок скрыли, на его месте не должно зиять пустое пространство.
Эти правила не про красоту, а про то, чтобы сайт жил без разработчика: контент-менеджер правит страницы, а вёрстка держится. Когда сайт уже работает и хочется проверить, всё ли в порядке, помогает самостоятельный аудит сайта на 1С-Битрикс. Если нужна вёрстка или доработка шаблона под Битрикс - разберём задачу на диагностике.
