Один и тот же блок может выглядеть по разному в зависимости от дизайна, местопложения на странице или на разных проектах. Изменение внешнего вида или поведения блока будем называть модификацией. Существует три вида модификации: дополнительным классом, от контекста и файлом.
Дополнительным классом
Самый простой тип модификации. Добавляем блоку дополнительный класс и изменение внешнего вида блока описываем в рамках этого класса.
Модификатор записывается через подчёркивание после имени блока: 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;
}
Модификация файлами
Блок может выглядеть на разных проектах по разному. При этом его общая часть лежит в одном файле (например, в репозитории фреймворка), а частная для проекта в другом (в репозитории проекта). Это модификация файлами. Никаких дополнительных классов не вводится, блок до(пере-)определяется дополнительными проектными стилями.
Например, все шапки Яндекса состоят из двух частей: общая часть, реализующая взаимное расположение элементов, лежит в одном месте, а конкретика проекта (цвета, как правило) в другом.