EN
Виталя Харисов
Виталя Харисов
2 апреля 2009
Read-only

Все блоки можно условно разделить на два класса: простые и составные. Простой блок атомарен и не позволяет вкладывать в себя другие блоки. Составной блок может содержать другие блоки.

Простые блоки

Простые блоки можно делать опираясь внутри блока в CSS-правилах на имена элементов. Строго говоря, в простые блоки можно вкладывать другие блоки до тех пор, пока у них не пересекаются имена элементов и не происходит конфликт стилей.

Рассмотрим на примерах.

Пример: иконка

Универсальный блок для вставки иконки. Позволяет вставлять иконки как одной картинкой, так и спрайтом. Как GIF/PNG-8, так и PNG-24. Позиционируется абсолютно, родитель должен зарезервировать место под иконку. Фоновая картинка задаётся для .b-icon i. Для выбора кадра спрайта используется .b-icon i { left: -Xpx } или .b-icon i { top: -Ypx }

HTML:

<i class="b-icon"><i></i></i>

CSS:

.b-icon
{
    position: absolute;

    overflow: hidden;

    /* default width/height and offset */ /**/
    width: 16px;
    height: 16px;
    margin-left: -19px;
}

.b-icon i
{
    position: absolute;

    /* Надо задать размер картинки */ /**/
    /* width: 523px; */
    /* height: 18px; */

    /* Надо задать background */ /**/
    /* background: url(path-to-image); */
}

Реализация этого блока не подразумевает вставки в него других блоков. Это атом, который нельзя разделить.

Пример: аватарка

Следующий пример это аватарка. Это картинка и ссылка на профиль пользователя. Ссылка может отсутствовать.

HTML:

<i class="b-userpic"><a href="#"><img src="..." alt=""/></a></i>

CSS отсутствует.

Пример: имя пользователя

Яндексовое имя пользователя. Полужирное и с первой подчёркнутой красной буквой. Может не быть ссылкой.

HTML:

<b class="b-user"><a href="#"><b>s</b>undukov</a></b>

CSS:

.b-user, .b-user *, .b-user a:link
{
    font-weight: bold;

    color: #000 !important;
}

.b-user a, .b-user a b
{
    text-decoration: underline !important;
}

/* First character */ /**/
.b-user b
{
    color: #f00 !important;
}

Пример: аватарка и имя пользователя

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

HTML:

<b class="b-user">
    <a href="#">
        <i class="b-userpic"><img src="..." alt=""/></i>
        <b>s</b>undukov
    </a>
</b>

CSS:

.b-user .b-userpic
{
    position: absolute;

    margin-left: -30px;
}

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

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

Составной блок

В составных блоках нужно опираться только на классы, иначе стили родительского блока будут влиять на вложенные блоки.

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

Рассмотрим на примере. Для начала не будем задавать классы никаким элементам.

<div class="b-services">
    <h2>Сервисы</h2>

    <ul>
        <li><a href="">Крибли</a></li>
        <li><a href="">Крабли</a></li>
        <li><a href="">Бумс</a></li>
    </ul>
</div>

Не задав класса для ul и li мы потеряли возможность вложить в элемент списка блок, который тоже реализован на списках, например, выпадающий по клику список (b-dropdown). Стили от .b-services ul и .b-services li будут накладываться на элементы у .b-dropdown li.

<div class="b-services">
    <h2>Сервисы</h2>

    <ul>
        <li>
            <ul class="b-dropdown">
                <li class="visible">
                    <a href="" onclick="dropdown(event)">Крибли</a>
                </li>
                <li><a href="">Крибли-Крибли</a></li>
                <li><a href="">Крибли-Крабли</a></li>
            </ul>
        </li>
        <li><a href="">Крабли</a></li>
        <li><a href="">Бумс</a></li>
    </ul>
</div>

Конфликта можно избежать, если ul и li в .b-services задать классы.

<div class="b-services">
    <h2>Сервисы</h2>

    <ul class="services">
        <li class="service">
            <ul class="b-dropdown">
                <li class="visible">
                    <a href="" onclick="dropdown(event)">Крибли</a>
                </li>
                <li><a href="">Крибли-Крибли</a></li>
                <li><a href="">Крибли-Крабли</a></li>
            </ul>
        </li>
        <li class="service"><a href="">Крабли</a></li>
        <li class="service"><a href="">Бумс</a></li>
    </ul>
</div>

При этом элементу h2 класс можно не задавать, опираться на него в CSS и надеяться, что во вложенных блоках h2 не будет (как правило не бывает, вложенные блоки имеют заголовки меньшего уровня или вообще без заголовков).