Правильно ли в БЭМ применять миксы для задания одинаковых свойств для нескольких элементов?

Question

[Norum]

Например, если вдруг в макете есть несколько элементов с одинаковым размером шрифта, цветом и типом шрифта, то я могу ведь добавить один микс к названию основного элемента и задать этому миксу определенные стили и потом просто добавлять его к другим элементам?

По полочкам: есть блок header, presentation и description и в каждом из этих блоков есть блок, отвечающий за текст: header__text, presentation__text, description__text.

<div class="header">
    <div class="header__text">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>
<div class="presentation">
    <div class="presentation__text">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>
<div class=" description">
    <div class=" description__text">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>

и внутри каждого есть сам текст они все имеют одинаковый тип шрифта размер шрифта и цвет шрифта.
Могу ли я просто прописать класс (микс) под названием text, в котором и будут содержаться все эти стили и уже к каждому блоку добавлять этот микс? То есть , и ? НО, если вдруг, предположим у блока description__text шрифт меньше, то просто задается модификатор fz_description_text с font-size для этого блока отдельно? Я все верно понял?

.text {
   font-family: 'Heebo', sans-serif;
   font-size: 14px;
   color": black;
}

<div class="header">
    <div class="header__text text">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>

<div class=" description">
    <div class=" description__text fz_description_text">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>

.fz_description_text {
   font-size: 17px;
}

Answer 1

[strelok011]

В парадигме scss вся эта ерунда может реализоваться миксом на уровне scss, а не на уровне микс-классов. Не стоит упарываться по идеологии.
Если вам важна цель - не надо перегружать разметку такими мусорными классами.

Comments

[Norum]

так правила БЭМ надо ведь соблюдать, хоть они и запутанные...плюс это ведь для дальнейшей сборки через вэбпак

[strelok011]

Никто не говорит "не соблюдайте правила БЭМ". Можно их частично обойти в реализации. И это именно для сборщиков, вебпак там или еще что - не важно.
БЭМ нужно использовать для основной идеи - блок/элемент/модификатор. Миксы - это уже костыль, который в коде хтмл вам никак не пригодится.
Вообще все эти соглашения ориентированы в первую очередь на удобство разработки и дальнейшей поддержки в больших командах. На выходе весь этот комплекс спокойно может быть уничтожен вебпаком во славу минимизации и т.п.

[Realetive]

strelok011, у вас какое-то извращённое понимание идеи методологии БЭМ. Если вам по неграмотности показали какую-то нерабочую «адаптацию БЭМ» (коих десятки, причём от достаточно авторитетных источников), то это не повод игнорировать официальный — https://bem.info, где подробно и с примерами описаны и про преимущества миксов (аналог заимствования методов и свойств у другой сущности) и про мнимую выгоду от минимизации этого кода.

[strelok011]

Realetive, мнээээ, а при чем тут минимизация? с БЭМом я возился можно сказать почти с самого его становления, про bem.info разумеется в курсе, просто если проект собирается билдером и используется scss, я предпочитаю пользоваться его плюшками и быть уверенным в поведении верстки без всяких миксов в классах. Только и всего ))

Answer 2

[iBird Rose]

ты можешь этот текст создать в виде отдельного блока и вставлять в свои блоки header, presentation, description и т.д.
условно назвать его page-text. тогда и модифицировать данный блок будет проще:

<div class=" description">
    <div class="page-text page-text_small">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>

Comments

[Norum]

а это прокатит при сборке через вэбпак? Плюс page-text является элементом блока и по правилам БЭМ, он в своем названии должен содержать часть названия блока-родителя и сами элементы не могут существовать вне блока, а название элемента page-text говорит о том, что оно не ясно к чему относится. Верно ведь?

[iBird Rose]

Norum, собирай чем хочешь. это всего лишь нейминг классов. проблем не будет
не путай элемент и блок. я в своем комменте имею ввиду именно самостоятельный блок page-text,а его можно вкладывать куда угодно: https://ru.bem.info/methodology/quick-start/#%D0%B...

Answer 3

[Realetive]

Да, всё верно! Есть пару советов, основанных уже на личном опыте:
1. Абсолютно справедливо наблюдение про вынесение текстовых закономерностей в самостоятельный блок. Блок text отлично подходит. Но если семантически (и в дизайне) этот текст соответсвует заголовку (жирность, бо́льший размер шрифта, можно использовать тег <h1-h6>), то я завожу отдельный блок heading. Если используется шаблонизатор (React, Pug, Handlebars, etc.), то задание тега удобно ещё положить в

…/heading/heading.<jsx | tsx | pug | html | yet-another-templater>

. Тогда микс будет более «семантичным» тоже:

/* …/heading/heading.css */
.heading {
  font-weight: bold;
}

/* …/heading_size/heading_size.css */
.heading_size_s {
  font-size: 18px;
}

.heading_size_m {
  font-size: 24px;
}

.heading_size_x {
  font-size: 28px;
}

Ну и просто для наглядности:

/* …/header/header.css */
.header {
  padding: 4px;
  text-size: 20px;
}

/* …/header/__text/header__text.css */
.header__text {
  margin-bottom: 20px;
}

<div class="header">
    <h3 class="header__text heading heading_size_x">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </h3>
</div>

/* …/presentation/presentation.css */
.presentation {
  padding: 6px;
  background-color: #000;
  color: #ffff;
}

/* …/presentation/__text/presentation__text.css */
.presentation__text {
  margin-bottom: 20px;
  color: #123;
}

<div class="presentation">
    <h4 class="presentation__text heading heading_size_m">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </h4>
</div>

/* …/description/description.css */
.presentation {
  padding: 11px;
  border: 1px solid #000;
  border-radius: 4px;
}

/* …/description/__text/description__text.css */
.presentation__text {
  margin-bottom: 16px;
  text-transform: uppercase;
}

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.




NB! У каждого heading оказался свой размер (модификация heading_size_*) и свой тег (<h1-h6>), но вполне может быть и

<h1 class="heading heading_size_s">Самый главный заголовок, но мелким шрифтом</h1>

<h6 class="heading heading_size_xl">Заголовок под-под-подраздела, но крупным шрифтом</h6>

2. Если же это просто текст (подзаголовок, описание раздела, мета-информация), то просто модификация текста тоже сработает:

/* …/text/text.css */
.text {
  padding: 11px;
  border: 1px solid #000;
  border-radius: 4px;
}

/* …/text/_weight/text_weight.css */
.text_weight_bold {
  font-weight: bold;
}

/* …/text/_style/text_style.css */
.text_style_italic {
  font-style: italic;
}

/* …/text/_decoration/text_decoration.css */
.text_ transform_uppercase {
  text-transform: uppercase;
}

<div class="header">
    <div class="header__text text text_weight_bold">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>
<div class="presentation">
    <div class="presentation__text text text_style_italic">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>
<div class=" description">
    <div class=" description__text text text_weight_bold text_ transform_uppercase">
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
    </div>
</div>