Верстка «под Битрикс»

16 Жов
16.10.2012

Верстка под Битрикс

В этой статье я попытаюсь коротко и доступно дать рекомендации, как верстать под Битрикс, чтоб “верстальщик не стал врагом программиста” и не делал тысячи “глупых” правок. Начну с основных моментов, их немного. Закончу же тем, что я вынесла для себя из опыта верстки.

Не устанавливать полный reset
Сбрасывая все стили по умолчанию, необходимо их переопределить, ведь не зря разработчики их установили. А в случае с Битриксом делать это вообще нельзя, поскольку сломается вся админка frontend’а.

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

table, td { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0;} input, textarea, submit { border:none; background:gray; width:250px; }

Минимизировать использование абсолютных элементов за исключением необходимости
Абсолютный элемент — сам по себе и вне контекста. Обычно таких элементов очень немного. И их явно видно в макете. Использование по назначению и нет часто приводит к непредсказуемому поведению верстки, когда какой-то блок/элемент нужно убрать. Тогда получаются дыры. Чем больше дыра, тем круглее глаза у программиста (о мыслях умолчу :) ).
В дизайне все идеально, но не в реальности. Это нужно учитывать.

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

<body> <div class="header" style="position: absolute; top:0;"></div> <div class="content">Hello!</div> ... </body>

Также стоит быть осторожным с использованием высоких значений z-index. Не стоит устанавливать значение в 1000, если в верстке нет ни одного блока, имеющего значение близкое. Можно начинать с малого, 1-10, повышаясь короткими шагами (5-10) по мере необходимости.

Не использовать “банальные” названия стилей
Я помню одно название “.title”, использование которого благополучно сломало админку frontend’а. Поэтому проявляем полет фантазии и называем оригинально, но осмысленно.

Шаблонизировать контейнеры контента
Если шапка, футер, контейнер контента и прочие блоки одинаковые, значит и код и разметка у них должны быть одинаковыми.
Различия контентных составляющих необходимо обрамлять в дополнительные обертки с идентификацией классом или ИД, если необходимо.

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

<body> <div class="header"></div> <div class="main_wrap1"> <div class="main_left"></div> <div class="main_right"></div> </div> <div class="footer"></div> </body>

page2

<body> <div class="header"></div> <div class="main_wrap2"> <div class="main_left"></div> <div class="main_right"></div> </div> <div class="footer"></div> </body>

Если поведение колонок одинаковое, вместо выделения для них двух отдельных класснов .main_wrap1 и .main_wrap2, стоит указать один .main_wrap и классифицировать внутреннее содержимое.

Здесь открою крошечную тайну: по поводу некоторых мелочей с дизайнерами всегда можно договориться ;) . Т.е., например, если на двух макетах одни и те же отступы/поля отличаются в несколько пикселей, это не всегда критично и может быть приведено к одинаковому значению.

Не использовать “>”
Как-то изначально к подобной записи селекторов душа не легла, то ли потому, что лень было разбираться, то ли потому, что Луна была не в нужной фазе. Но так сложилось исторически. На практике же выходит так, что на стадии программирования происходят всякие метаморфические перемены в разметке и верстка может сломаться. Если взять во внимание Битрикс, то админка frontend’а добавляет дополнительные обертки и прочие вкусности, что очень удачно ломает все наследования.

Раздавать каждому элементу классы
Двусмысленное заявление, которое каждый трактует по-своему и золотую середину находит каждый свою. Основным является тот аргумент, что рендеринг происходит быстрее, т.к. чтение стилей ведется справа налево, а иерархия значительно снижается (до 2-3 уровней). Еще скажу, что это удобнее — осознание этого приходит с опытом :) .

Отмечу, что на этом принципе построен БЭМ от Яндекс.

Использовать теги по назначению
Здесь дело принципиальное каждого отдельного человека. Споров о семантичности верстки очень много. Не скажу, что я ярый приверженец оной. Но всему есть предел. Отличная статья по этому поводу Наша бессмысленная погоня за семантической ценностью

Верстка под Битрикс

От себя же добавлю, что как-то глупо обнулять стилизированные теги (<i>, <b> …) , если можно использовать пустые  (<div>, <span>)

Предусматривать вариант отсутствия картинки сбоку или любого другого элемента блока (названия, даты, описания, автора …)
Есть очень удобный способ делать это безболезненно и легко, а еще кроссбраузерно. Читайте хорошую статью от Akella overflow:hidden.

Не обрамлять элементы списка публикаций ссылкой

Мое личное мнение: разметка смотрится мягко говоря непривычно, о семантике и говорить нечего. Но меня просветил специалист из другой отрасли — оказывается, SEO страдает по первое число и робот такие записи попросту пропускает.

<a href="#" class="item"> <img src="../img/pics/img1.jpg" alt="Публикация" class="img"> <b class="details"> <i class="heading">Заголовок статьи</i> <span class="date">01.08.2012</span> <i class="text">Краткое описание публикации...</i> <i class="more">подробнее</i> </b> </a>

Не прописывать стили и скрипты в разметке
Давным давно жил-был замечательный doctype Strict, который регламентировал разделять “Мухи отдельно, котлеты отдельно”. Согласитесь, намного удобнее шайбы искать в банке на средней полке, а болты — в шкафчике, в дальнем углу комнаты, а не перемешаные в среднем ящике стола.

Такое распределение порядка позволит централизированно вносить изменения как в стили, так и в разметку, и в скрипты и не искать причины, по которым данные изменения почему-то не хотят применяться.

Напоминать про ролловеры и выпадающие элементы
Все мы без исключения хотим, чтоб сайты реагировали на наши действия, откликались, визуально объясняли задумку создателя, были отзывчивыми. Основную роль в реализации такой “конфетки” играет ролловер. И если вдруг дизайнер забыл прорисовать на что-то отклик, нужно ему об этом напомнить. Тогда все без исключения будут гордиться таким творением.

Использовать отдельные классы для скриптов
Когда верстка максимально приводится к одному “знаменателю”, одинаковые стили могут быть применены к различным по смыслу блокам. Не каждому нужен будет вызов скрипта. Разделив с помощью классов представление и контроллер, получаем возможность безболезненно вносить изменения в код.

Полезно почитать:
Верстка под битрикс и создание шаблона – особенности, проблемы, рекомендации.
Coding Clean and Semantic Templates - несколько советов о чистоте и семантичности кода.
5 Simple, But Useful CSS Properties - 5 полезных свойств CSS
Создаем шаблон битрикс – быстрый старт.
Создание шаблона «1С-Битрикс».


И напоследок, не забывайте Конфуция. Верстая содержимое контента, задумывайтесь: как человек, не имеющий ни малейшего понятия о HTML и с трудом разбирающийся в WYSIWYG, будет создавать наполнение сайта в таком же виде.

Теги: ,