Блок и модификатор, без элемента (для повторного использования в др. секциях...)

Допустим, есть нескольких однотипных секций.

section.header

section.about

section.footer

В каждой секции есть блоки с одинаковым видом(стили), т.е.

<section class="header">
   <div class="header__title">Заголовок</div>
   <div class="header__subtitle">Подзаголовок</div>
   <div class="header__text">Основой текст. Основой текст. Основой текст. Основой текст.</div>
   <div class="header__btn><a class="header__link" href="#">Ссылка</a></div>
</section>

Раз он(стиль) повторяется, можно ли(правильно ли, с точки зрения БЭМ) сделать такую модификацию?

Сделать микс с header, т.е. header fortext
Вместо элементов сделать модификаторы

<section class="header fortext">
   <div class="fortext_title">Заголовок</div>
   <div class="fortext_subtitle">Подзаголовок</div>
   <div class="fortext_text">Основой текст. Основой текст. Основой текст. Основой текст.</div>
   <div class="fortext_btn"><a class="header__link" href="#">Ссылка</a></div>
</section>

Чтобы fortext... применять для др. секций

Код правильный, с точки зрения БЭМ ?? Или может лучше, как-то по другому?

4 years ago

Realetive

Код правильный, с точки зрения БЭМ?

— Почти: fortext_title, fortext_subtitle, fortext_text и др. — это, я так понял, элементы. Но записаны они как модификаторы.

Если они повторяются, зачем появились header или footer? Тогда это они больше похожи на модификатор, например .page__section.page__section_position_header и .page__section.page__section_position_footer.

Без дизайна всего приложения гадать о полезности блока fortext с точки зрения БЭМ бесполезно. БЭМ — это про правильную композицию компонентов, а не «классы через чёрточку». Видеть эти закономерности гораздо важнее и правильнее с точки зрения БЭМ, чем пытаться обобщить повторяющиеся CSS-свойства.

4 years ago

matiev

Не много не правильно записал (для модификаторов, мне удобнее --)

Если так:

...
...блок header...
<section class="header__inner fortext">
   <div class="fortext--title">Заголовок</div>
   <div class="fortext--subtitle">Подзаголовок</div>
   <div class="fortext--text">Основой текст. Основой текст. Основой текст. Основой текст.</div>
   <div class="fortext--btn"><a class="header__link" href="#">Ссылка</a></div>
</section>

у header__inner - свои отступы.

у about__inner - другие,

итд.

4 years ago

Realetive

С точки зрения именования код «валидный». С точки зрения целесообразности без дизайна подсказать не могу.

4 years ago

EMDM45

Вообще странно. Section, но при этом класс header Соглашусь с мнением выше, без дизайна сложно понять. Но... Например так можно:

<section class="projects-section section"></section>
<section class="about-section section">
   <header class="section__header">
      <h1 class="section__title">Заголовок</h1>
      <h2 class="section__subtitle">Подзаголовок</h2>
   </header>
   <div class="section__body">Основой текст. Основой текст. Основой текст. Основой текст.</div>
   <footer class="section__footer><a class="section__button button" href="#">Ссылка</a></footer>
</section>
<section class="contacts-section section"></section>

Если какую-то секцию нужно модифицировать, у меня обычно два варианта:

добавить нужный класс

<header class="about-section__header section__header">...</header>
.section__header{}
.about-section__header{}

Писать CSS так:

.about-section .section__header{}

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