Модификаторы

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

Основное предназначение модификатора — дополнять базовые стили и функционал сущности, расширяя или частично переопределяя его особенности.

Модификатор не должен переопределять большую часть базового набора функционала сущности, при возникновении такой ситуации стоит пересмотреть присвоенную роль сущности и принять решение упростить или вынести в самостоятельную единицу (модуль, блок).

Определение модификатора

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

entity
	entity_element

entity__modifier
	entity_element__modifier

Что бы наглядно отделить модификатор от других элементов, используется особое правило именования, определяющее специальный разделитель, используемый только в названиях модификаторов — “__“ (двойное подчеркивание).

Подробней почитать о правилах именования и о ключевом слове можно в отдельном модуле отдельном модуле.

В CSS/HTML

Именование

В первой версии синтаксиса MCSS использовалась такая запись модификатора:

.block {}
.block__modifier {}

С отбросом поддержки IE6 появилась возможность описывать модификатор в более читабельном виде, относительно HTML.

.block {}
.block.__modifier {}

Наглядные пример удобства второго подхода:

<div class="block block__modifier">element</div>

<div class="block __modifier">element</div>

Чем больше модификаторов, тем больше пользы от нового типа записи:

<div class="block block__modifier block__active block__hover">element</div>

<div class="block __modifier __active __hover">element</div>

Стоит заметить, что во втором варианте незначительно увеличивается каскадность селекторов. Такое уменьшение производительности минимально и в случае редкого использования фактически не повлияет на общую скорость загрузки, к тому же, по обратную сторону фронтенда итоговый документ становится легче.

Расположение

HTML

Говоря о расположении в HTML, главное правило — определять модификатор максимально выше в сущности. Чем выше определен модификатор, тем больше контроля над сущностью и модификацией отдельных ее элементов, как существующих, так и новых в будущем.

Плохой пример использования модификатора:

<div class="block">
    <div class="block_element">
        <div class="block_sub-element __modifier">
            Sub element text
        </div>
    </div>
</div>

Хороший пример использования модификатора:

<div class="block __modifier">
    <div class="block_element">
        <div class="block_sub-element">
            Sub element text
        </div>
    </div>
</div>

CSS

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

.block {}
.block_element {}
.block_sub-element {}

.block.__modifier {}
    .block.__modifier .block_element {}
    .block.__modifier .block_sub-element {}

Общие правило расположение стилей описано в отдельном модуле.