Как правильно подружить несколько модификаторов?

Здравствуйте,

Есть блок кнопки

<div class="btn"><i class="icon btn__icon"><i><span class="btn__text>Button Text</span></div>

У кнопки есть модификаторы размера: --sizeL, --sizeS (задают отступы между элементами btn__icon bth__text и общий padding) Также есть модификатор --iconRight (который переносит иконку направо через flex order: 2, div btn свёрстан с помощью flex соответственно)

Вопрос такой: я сейчас сверстал так, что модификаторы --sizeL, --sizeS задают правый маржин у элемента btn__icon (для --sizeL маржин больше чем для --sizeS). Теперь хочу прописать стили для --iconRight, в моём случае я должен отменить маржин справа у иконки и добавить маржин слева и он должен быть разным для --sizeL и --sizeS.

Выходит нехорошая ситуация - модификатор --iconRight "знает" про модификаторы --sizeL и --sizeS, не говоря про макароны в css. Как этого можно избежать? Спасибо!

7 years ago

tadatuta

В данном случае этого, к сожалению, не избежать — такова семантика модификатора iconRight, что он обязан знать про разные размеры.

7 years ago

Kundin

Например: ``` block(btn) { display: inline-flex;

color: #fff;
border: 1px solid #555;
background: #aaa;

mod(size s) {
    padding: 4px;

    elem(ico) {
        margin: 0 4px;
    }
}

mod(size l) {
    padding: 8px;

    elem(ico) {
        margin: 0 8px;
    }
}

mod(icon left) {
    elem(ico) {
        margin-left: 0;

        order: -1;
    }
}

mod(icon right) {
    elem(ico) {
        margin-right: 0;

        order: 1;
    }
}

}

7 years ago

anton-dubrovin

Спасибо,

в моём случае модификатора --icon-left не существует, это дефолтное поведение для блока, поэтому проблему решил установкой горизонтальных маржинов и для иконки и для текста, модификатор --icon-right меняет только порядок через flex order.

Чтобы оставлять комментарии, необходимо авторизоваться.