Как с точки зрения БЭМ размечать внутренние страницы сайта?

Question

[MyQuestion]

Как с точки зрения БЭМ размечать внутренние страницы сайта?

Нужно ли везде указывать, что это за страница? Например inner-page__services или price-page__quality-assurance

Допустим у меня есть внутренняя страница сайта, раздел которой, в принципе может быть описан как services. Там есть список услуг и цены на них, а так же список брендовой продукции, который гарантирует качество оказываемых услуг.
Но привычно, services, мелькает где-то на главной странице лендинга. И тут я зашёл в тупик. Ведь services этот блок, который может повторятся и на других страницах сайта, и при этом, будет выглядеть по другому. В моём случае, такого раздела на главной нет. Но, ему там ничего не мешает появиться, со временем.

Конечно, если полностью следовать БЭМ, должна появиться и такая же структура файлов. Но если мне необходимо все стили запихать в один css? Тогда, стоит ли как-то выделять контент внутренних страниц? Или нужно избегать повторения в именование классов?

Comments

[Вадим]

БЭМ расшифровывается как блок-элемент-модификатор.
Про страницы ничего не говорится.
БЭМ в прошлом Lego.
Подобно тому, как из кубиков лего, собирается целый конструктор, что-то осмысленное и законченное, скажем, дом, собираются страницы сайта.

Вы ведь не называете окна, двери, кирпич как "дом__окно", или "дом__дверь", потому что одни и те же двери и одни и те же окна могут использоваться как в доме, так и в квартире, так и в сарае.

Бэм он про собирание большого из маленького.

Сам подход именования блоков и элементов в зависимости от страницы - уже не вписывается в методологию.

Каждый блок должен иметь свой класс и не должен иметь внешней гемотрии(например, маргинов).
А в месте где блок используется можно использовать миксование.
И когда у Вас есть блок-контэйнер для внутренних(не главной) страниц, Вы называете этот блок что-то вроде "inner-page" в котором размещаете другие Ваши бэм-блоки.
И в таком случае Вам может пригодится использовать бэм микс, например, чтобы задать внешнюю геометрию используемому блоку.

Например, если у нас есть компонент логотипа, который мы используем в шапке сайта и в футере, но отступ справа есть только в шапке, то блоку логотипа можно примиксовать класс header__logo, в котором укажем margin-right.
И тогда конечный класс блока логотипа в шапке будет иметь вид:
class="logo header__logo".

Вот как-то так и с внутренними страницами. Но привязываться к какой-то отдельной странице по смыслу её содержания - не корректно.

Answer 1

[Алекс Глебов]

Структура для всех страниц:

.page
    .page__header
      .header
    .page__wrapper
      .page__block1
        .block1  // это блок страницы, замените на свое название
      .page__block2 
        .block2 
  .page__footer
      .footer

Нужно ли везде указывать, что это за страница?

Базовый шаблон, который есть на всех страницах (шапка, футер) обычно при интегрировании верстки выносят в отдельный файл. Поэтому вешать на каждую страницу свой класс без надобности не надо.

Ведь services этот блок, который может повторятся и на других страницах сайта, и при этом, будет выглядеть по другому.

Назовите его по-другому .main-service или .last-service

Конечно, если полностью следовать БЭМ, должна появиться и такая же структура файлов. Но если мне необходимо все стили запихать в один css?

В беме у каждого блока свой файл стилей. Собирать итоговый css можно как угодно, например, используйте sass include.

Или нужно избегать повторения в именование классов?

Нужно избегать повторений в именах блоков.

Comments

[alex4answ]

Алекс Глебов , мне обязательно оборачивать блок, чтобы указать ему внешнюю геометрию?

<div class="page__block1">
  <div class="block1">
    block
  </div>
</div>

не могу сделать так: ?
<div class="page__block1 block1">block</div>

[Алекс Глебов]

alex4answ, можете, это называется микс в беме. Но если блок хранится в своём файле, то прокидывать туда внешний класс проблематично и не логично. Поэтому написал универсальный вариант.

Answer 2

[Валерий]

Ведь services этот блок, который может повторятся и на других страницах сайта, и при этом, будет выглядеть по другому

Для этого можете воспользоваться миксом. Например, у вас есть блок services и вы хотите его использовать на главной и на любой другой странице, тогда именование это блока на главной будет такое - class="main__services services" где по селектору main__services вы описываете расположение элементов внутри блока services для главной страницы. Теперь для другой страницы можно сделать тоже самое class="another-page__services services"