Как правильно верстать под CMS

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

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

Возьмем несколько привычных блоков, header, хлебные крошки, новости, карусель партнеров, footer.

<div class=”container”>

    <header></header>

    <div class=”breadcrumb”>

        <a href=””>Главная</a><span>Новости</span>

    </div>

    <div class=”news_container”>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

    </div>

    <div class=”partners_container”>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

    </div>

    <footer></footer>

</div>

1. Старайтесь не включать хлебные крошки в состав контентного блока, в данном случае, новостей.

<div class=”news_container”>

    <div class=”breadcrumb”>

        <a href=””>Главная</a><span>Новости</span>

    </div>

    <div class=”news-item”></div>

    <div class=”news-item”></div>

    <div class=”news-item”></div>

</div>

Это вынудит при внедрении верстки повторять крошки в каждом создаваемом объекте. В идеале крошки должны быть выделены в отдельную, независимую секцию. Впрочем, как и все прочие составляющие, но об этом ниже.

2. Не объединяйте какие-то внутренним контейнером часть блоков. Для примера добавим в нашу верстку блок с блогом:

<div class=”container”>

    <header></header>

    <div class=”breadcrumb”>

        <a href=””>Главная</a><span>Новости</span>

    </div>

    <div class=”news_container”>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

    </div>

    <div class=”inside_container”>

        <div class=”blog_container”>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

        </div>

        <div class=”partners_container”>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

        </div>

    </div>

    <footer></footer>

</div>

Такой подход не позволит разделить блоки «Блог» и «Партнеры», вынуждая разработчика все время «спаивать» их вместе. Конечно, ни один адекватный разработчик на это не пойдет, и начнем верстку переделывать. Угадайте, кого при этом он будет материть? Если все же в дополнительном контейнере есть необходимость, то делайте обертку для каждого блока:

<div class=”inside_container”>

    <div class=”news_container”>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

        <div class=”news-item”></div>

    </div>

</div>

<div class=”inside_container”>

    <div class=”blog_container”>

        <div class=”blog-item”></div>

        <div class=”blog-item”></div>

        <div class=”blog-item”></div>

        <div class=”blog-item”></div>

    </div>

</div>

<div class=”inside_container”>

    <div class=”partners_container”>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

        <div class=”partner-item”></div>

    </div>

</div>

3. Не используйте для повторяющихся блоков разные классы.

<div class=”blog_container”>

    <div class=”blog-item blog-first”></div>

    <div class=”blog-item blog-cool”></div>

    <div class=”blog-item”></div>

    <div class=”blog-item blog-last”></div>

</div>

Поймите, при натяжке верстки есть всего один шабон. Конечно, кастомизровать его возможность есть, как-то: в зависимости от номера блока, в зависимости от четности / не четности. В конце концов, можно задать класс вручную. Но это все исключения и моветон, в большинстве случаев индивидуальности блоков можно избежать.

То же самое касается меню, в основном в части наличия подуровней, когда надо выводить стрелочку или иной указатель — приемлимо использовать классы, теги внутри ссылок, но не меняйте сам тег <а>.

Правильно:

<a>Главная</a>

<a>О нас</a>

<a>Блог</a>

<a>Каталог <i class=”arrow-down”></i></a>

<a>Контакты</a>

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

<a>Главная</a>

<a>О нас</a>

<a>Блог</a>

<span>Каталог <i class=”arrow-down”></i></span>

<a>Контакты</a>

4. Стремитесь к одинаковому набору контейнеров для всех страниц. Если у вас для одной страницы предусмотрено

<div class=”container”>

    <div class=”inside-container”>

….........................

    </div>

</div>

а для другой

<div class=”container”>

    <div class=”blog-container”>

        <div class=”content”>

….........................

        <div>

    </div>

</div>

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

Но в долгосрочной — подумайте вот о чем: чем кривее сделана логика верстки (сейчас не говорим про качество), тем дольше длиться разработка сайта — приходится переделывать верстку, искать решения там, где это делать невозможно или слишком затруднительно.

И если разработчика спросят почему — он же объяснит. Внятно. И никакому владельцу веб-студии не понравится переплачивать за преодоление трудностей там, где этого можно не делать.

Далее. Усложняется эксплуатация сайта. Там, где могло быть простое решение по управлению контентом, допустим, поставить галочку, выбрать из списка, пользователям приходится прописывать идентификатры, классы, выставлять требуемый макет или шаблон, проделывать прочие подобные некомфортные штуки. Плюс некоторые секции оказываются неподвластны простому перестроению вверх / вниз по странице, как пример — то есть теряется и гибкость модификации.

А немногие контент-менеджеры готовы сию науку освоить. Менеджеры жалуются руководству, руководство — начальнику веб-студии, начальник веб студии вызывает программиста, и тот опять объясняет. Внятно. Фирма теряет уже не только деньги, но и репутацию.

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

<header></header>

<section>

    <div class=”container”>

        <div class=”breadcrumb”>

            <a href=””>Главная</a><span>Новости</span>

        </div>

    </div>

</section>

<section>

    <div class=”container”>

        <div class=”news_container”>

            <div class=”news-item”></div>

            <div class=”news-item”></div>

            <div class=”news-item”></div>

        </div>

    </div>

</section>

<section>

    <div class=”container”>

        <div class=”partners_container”>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

            <div class=”partner-item”></div>

    </div>

</div>

</section>

<section>

    <div class=”container”>

        <div class=”blog_container”>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

            <div class=”blog-item”></div>

    </div>

</div>

</section>

<footer></footer>

Ах да, небольшой P. S. - не используйте тег <p> как контейнер контента, вносимого пользователем через редакор. Дело в том, что в некоторых CMS именно этот тег используется для разделения абзацев по клику на Enter. Таким образом, если в верстке, к примеру, уже предусмотрен тег <p> с отступами, то при добавлении контента тег дублируется, и, соответственно, этот отступ удавивается, выходит что то вроде:

<section>

    <p> <!--  это тег-контейнер, предусмотренный в верстке !-->

        <p>  <!--  этот тег  добавился автоматически текстовым редактором CMS !-->

            контент

        </p>

    </p>

</section>

  • 1 Like