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

Один и тот же блок может выглядеть по разному в зависимости от дизайна, местопложения на странице или на разных проектах. Изменение внешнего вида или поведения блока будем называть модификацией. Существует три вида модификации: дополнительным классом, от контекста и файлом.

Дополнительным классом

Самый простой тип модификации. Добавляем блоку дополнительный класс и изменение внешнего вида блока описываем в рамках этого класса.

Модификатор записывается через подчёркивание после имени блока: b-имя-блока_модификатор.

<div class="b-message">
    Normal font-size
</div>
.b-message
{
    font-size: 100%;
}
<div class="b-message b-message_small">
    Small font-size
</div>
.b-message_small
{
    font-size: 85%;
}

У одного блока может быть одновременно несколько модификаторов.

<div class="b-message b-message_small b-message_error">
    Error message
</div>
.b-message_error
{
    color: red;
}

Модификация блока может требовать экстра-разметку внутри блока. Например, в сообщении об ошибке добавляется иконка с восклицательным знаком.

<div class="b-message b-message_small b-message_error">
    <i class="icon"></i>Error message
</div>
.b-message_error
{
    color: red;
}

.b-message_error .icon
{
    background: url(...);
}

От контекста

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

Внутри конкретного блока

Блок помещается в другой блок и должен изменить свой внешний вид.

<div class="b-dropdown">
    <a class="b-pseudo-link">или</a>
</div>
.b-dropdown .b-pseudo-link
{
    margin-right: 8px;
}

Внутри контекстного блока

Иногда бывает надо сделать контекстную модификацию блока без привязки к какому-то конкретному блоку. Например, поменять цветовую схему группе блоков (скины). Для этого вводим специальный блок с префиксом m-, который задаёт контекст, а в стилях конкретных блоков пляшем от этого контекста.

<body class="m-theme_red">
    <div class="b-logo"></div>
    <div class="b-service-name"></div>
</body>

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

Имя контекстного блока строится так: m-тип-модификации_модификация

Тоже самое можно записать через модификацию классом:

<body>
    <div class="b-logo b-logo_red"></div>
    <div class="b-service-name b-service-name_red"></div>
</body>

Если не экономить байтики, можно для любой модификации классом предусматривать одновременно и контекстную модификацию и использовать тот вариант, который наиболее удобен в каждом конкретном случае.

.b-message_error, .m-type_error .b-message
{
    color: red;
}

Модификация файлами

Блок может выглядеть на разных проектах по разному. При этом его общая часть лежит в одном файле (например, в репозитории фреймворка), а частная для проекта в другом (в репозитории проекта). Это модификация файлами. Никаких дополнительных классов не вводится, блок до(пере-)определяется дополнительными проектными стилями.

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

#mmoo
15 апреля 2009
.b-dropdown .b-pseudo-link {} - как-то слегка портится идеология независимости, нет? И к какому из двух блоков в таком случае относить этот кусок кода?