.b-left или .b-right?

11 мая 2012

В вёрстке абсолютно независимыми блоками важно давать корректные названия, и это достаточно трудоёмкий процесс. Почему это важно? Класс элемента, сконструированный с соблюдением единого принципа, однозначно указывает на его смысл и назначение. При этом хорошо читается его роль (блок, элемент блока) и/или модификация.

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

Нельзя допустить, чтобы название говорило о том, как элемент должен выглядеть, или какой тег ему соответствует. Много лучше, когда название объясняет, что это такое, каков смысл нахождения этого здесь. Про соответствие названия тегу вы, думаю, сами догадываетесь: ничто не вечно, и сегодня это <p>, а завтра <div> и т.д.

Плохо:

<div class="left"></div>n<p class="news__p"></p>n<ul class="ul">
    <li class="ul__li"></li>
</ul>

Хорошо:

<p class="article__teaser"></p>n<ul class="menu">
    <li class="menu__item"></li>
</ul>

У меня иногда возникает ситуация, когда я с трудом даю определение блоку / элементу. И в основном это связано с «красотой» дизайна, не несущего смысловой нагрузки. В эти моменты я грущу, так как бессмысленность дизайнерскоро решения отражается на коде, усложняя его, приводит к потенциальным проблемам, усложняет рефакторинг. Уверен, хороший дизайнер всегда задаёт себе вопросы: что это? почему это здесь?..

О дублировании кода

Рефакторинг, перевёрстка - все эти слова больше не пугают, если названия хорошо сконструированы, не пересекаются, а стили изолированы друг от друга. Тут есть один тонкий момент, связанный с пересечением вёрстки. Часто возникает соблазн вынести общие стили, например, скругления уголков или одинаковые отступы справа, в отдельные классы или даже блоки и примешивать их к одному и тому же html. С одной стороны, это уменьшает дублирование кода, создаёт свой внутрипроектовый фреймворк, позволяет в одном месте изменить значение внешний вид блоков / элементов, к которым добавлены эти примеси. С другой стороны, если увлечься, вёрстка становится размытой и внешний вид блока определяет не один css, связанный только с ним, но также и куча других правил, раскиданных по проекту, а количество класcов на тегах становится устрашающим. Ещё один минус - потеря семантики, так как эти примеси говорят скорее о внешнем виде, чем о сути, и, о ужас, в проекте могут появиться теги, на которые повешены только лишь классы примесей, говорящие не о смысле, а о внешнем виде его. Эта тенденция похожа на деградацию до старых каскадов и глобальных стилей. Рефакторинг такой вёрстки затрудняется. Всё это говорит о том, что не стоит перебарщивать с вынесением общих стилей.

Плохо:

<div class="news i-col50 i-left i-nowrap i-rounded-borders"></div>

Плохо:

<section class="blog">
    <div class="i-col60">
        <article class="blog__post">
            ...
        </article>
    </div>
    <div class="i-col40">
        <aside class="blog__author">
            ...
        </aside>
    </div>
</section>

Хорошо:

<section class="blog">
    <div class="blog__posts">
        <article class="blog__post">
            ...
        </article>
    </div>
    <div class="blog__description">
        <aside class="blog__author">
            ...
        </aside>
    </div>
</section>

О префиксах

Что касается префиксов, то их использование не имеет особой необходимости. Раньше я использовал разные префиксы: b-, l-, .h, g- и т.п. Если посмотреть на код, то большинство классов получало префикс b-, и это не несло эффективной смысловой нагрузки, только усложняло редактирование. Некоторые префиксы, как h- раньше или i- сейчас, имеют проблемы, связанные с их пониманием. Например, i- префикс предлагается использовать для глобальных блоков, примесей, а также для интерактивных элементов, что само по себе неопределённо и размыто. С другой стороны, иногда использую префикс g- для глобальных стилей (например, g-clear или g-hide) и префикс m- для темизации страницы (вешаю на ). Если возвратиться к старым префиксам, то можно отметить префикс l-, который имеет некоторый смысл в плане улучшения читаемости кода. Если подвести итог, то префиксы по большому счёту не нужны и только загромождают код.

О тегах

Так как блок является смысловой единицей, главный, «рутовый» тег блока должен являтся смысловым в плане html-разметки страницы. Такими тегами являются section, article, aside, footer, header, nav. Тег div особой смысловой нагрузки не несёт, как и span, является нейтральным; их стоит использовать для задач оформления, то есть для экстра-разметки, необходимой, чтобы повторить изыски дизайна в вёрстке.

Плохо:

<div class="page">
    <section class="page_content">
        <div class="header">
            <header class="logo">
                ...
            </header>
        </div>
    </section>
    ...
    <footer class="footer">
        ...
    </footer>
</div>

Хорошо:

<section class="page">
    <header class="header">
        ...
    </header>
    <section class="greeting">
        ...
    </section>
    <section class="hews">
        ...
    </section>
    <footer class="footer">
        ...
    </footer>
</section>

О выделении блоков

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

Было:

<section class="blog">
    <article class="blog__post">
        <header class="blog__post-info">
            ...
        </header>
        <div class="blog__post-teaser">
            ...
        </div>
    </article>
    <aside class="blog__author">
        <div class="blog__author-name">
            ...
        </div>
    </aside>
</section>

Стало:

<section class="blog">
    <article class="post">
        <header class="post__info">
            ...
        </header>
        <div class="post__teaser">
            ...
        </div>
    </article>
    <aside class="author">
        <div class="author__name">
            ...
        </div>
    </aside>
</section>