Как правильно переопределить стили блока?

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

.article__text {color: blue;} /* стиль текста именно в блоке article*/
.text {color: red;} /* общий стиль текста блока text*/

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

Стиль текста article__text все равно не меняется, потому что .text расположен ниже (сборка стилей в main.css происходит по алфавиту). Считаю, что использование !important или дополнительную вложенность элементов - это не метод БЭМ, так как же правильно обходить такую ситуацию? Следить за алфавитным порядком стилей в большом проекте также объективно не имеется возможности.

Или я неправильно понимаю использование миксов? Укажите, пожалуйста, на ошибку.

6 years ago

yialo

Хорошо бы иметь более полную картину.

Для чего Вы делаете вложенный в div абзац отдельным БЭМ-блоком? Если для указания особого цвета текста (а в таком случае этот абстрактный класс .text, вероятно, будет использоваться где-то ещё), то цвет в принципе не должен указываться в .article__text, т.к. класс .text будет введён именно для указания особого цвета.
Предполагается ли размещение каких-либо других элементов DOM-дерева, помимо абзаца, внутри div? А внутри абзаца? Возможно, делать абцаз отдельным БЭМ-блоком не нужно?

6 years ago

danis-arslanov

Абзац в вопросе является всего лишь упрощенным примером. Если ближе к реальности, то я хотел бы сделать страницу с несколькими разделами section: intro, profits, contacts, например. При этом, у меня:

.section { display: flex; flex-direction: column; }
.profits { flex-direction: row; }

соответственно, следующий момент работать не будет:

<section class="section profits"></section>

Получается, необходимо создавать:

.section { display: flex; flex-direction: column; }
.section_row  { flex-direction: row; }

<section class="section section_row profits"></section>

Но такой подход меня смущает излишними классами, а если именно у .profits будут еще дополнительные отличия от общего section, то придется вообще писать:

<section class="section section_row section_profits profits"></section>

Или так оно по сути и подразумевается?

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