БЭМ — как правильно переопределить стиль блока?

Question

[Иван Иванов]

Уважаемые коллеги, подскажите, пожалуйста, как правильно переопределить стили блока, например:

.article__text {color: blue}
.text {color: red}

<div class="article">
    <p class="text article__text">Текст все равно красный!</p>
</div>

Стиль текста article__text все равно не меняется, потому что .text расположен ниже (сборка стилей в main.css происходит по алфавиту).
Или я неправильно понимаю использование миксов?
Укажите, пожалуйста, на ошибку.

Answer 1

[Ankhena]

1. Не надо сортировать селекторы по алфавиту.
2. Если все блоки text красные, а какой-то один синий, то это модификатор для .text

Comments

[Иван Иванов]

Спасибо за ответ, получается, что блок нужно менять модификатором?
А миксом в данном случае воспользоваться невозможно?

Все, вопрос снимается...
Со страницы БЭМ:

Используйте микс:
1. чтобы позиционировать один блок в составе другого блока;
2. чтобы одинаково стилизовать несколько разных блоков на странице вместо применения групповых селекторов.

Answer 2

[Сергей Карвасарный]

это как по алфавиту?) название класса по алфавиту? что-то мне подсказывает что так делать не надо))

.article__text {color: blue}
.text {color: red}

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

Comments

[Иван Иванов]

Но ведь у меня могут быть разные блоки (.article, .contact, .feedback) с разными именами... в которых используется блок .text, и там, соответственно, тоже микс работать не будет.

Мне кажется, здесь не в алфавите дело, а в моем непонимании, как работает микс. Ведь в крупном проекте не уследишь за алфавитным порядком стилей?

[Сергей Карвасарный]

если сделаешь так .article__text.text {} тогда будет, а если как в примере вверху не будет. По алфавиту вообще не задумывался)) пишу по мере появления блоков сверху в низ и все. в твоем примере у тебя равнозначные классы получается т.е класс имеет вес 10 и тот и тот и применит то что будет ближе к конце файла, если ты сделаешь .article__text.text то вес уже выше 20 и применит его.

.article__text {color: blue}
.text {color: red}
.text.article__text {
color: orange;
}

сработает 3 вариант как не меняй местами. + судя по БЭМ ты должен такие стили как цвет и размеры шрифта задавать модификатором т.е article__text а не в text, на примере bootstrap можешь посмотреть - кнопки например, там btn если на всю ширину btn-block если цвет другой btn-error и т.п

[Иван Иванов]

Спасибо за ответ, но я с ним не согласен, поскольку в БЭМ не приветствуется использование вложенности элементов.
А схожий с моим пример, кстати, имеется здесь, там как раз цвета и размеры указываются в блоке .text.
Но там картина с прямо противоположной задачей... Т.е. для их задачи микс подходит, а для моей - нет, вот это и вводит меня в полный ступор.

[Сергей Карвасарный]

Данис Арсланов, как вариант они по алфавиту не ставили может быть, попробуй не собирать по алфавиту я не вижу в этом какого-то смысла если честно.

[Иван Иванов]

А в алфавитном порядке смысл простой:
1. Искать элемент в общем файле проще при необходимости правки.
2. У меня каждый класс идет в отдельном файле, и система автоматически их выстраивает по наименованию файла при сборке.

В любом случае, я тебе очень благодарен, что не прошел мимо. Буду искать решение дальше...

[Сергей Карвасарный]

Данис Арсланов, я глазами не ищу)) ctrl-f решает все проблемы)) да нет за что))

Answer 3

[Иван Иванов]

Все, вопрос снимается...
Со страницы БЭМ:

Используйте микс:
1. чтобы позиционировать один блок в составе другого блока;
2. чтобы одинаково стилизовать несколько разных блоков на странице вместо применения групповых селекторов.