Куда (В какой файл) записывать например блок lang?

Question

[godsplane]

Правильно ли я понял, что блоки бем должны быть независимы от внешнего окружения.
Например у меня есть переключатель языка :

<nav class="header__lang-nav lang">
        <span class="lang__item"><a class="lang__link" hreflang="ru" href="/" lang="ru">RU </a></span>
        <span class="lang__item"><a class="lang__link" hreflang="en" href="/en" lang="en">EN </a></span>
      </nav>

Который в данный момент находится только в header, но в теории его можно будет запихать еще куда-то.
Стили для этого lang я должен писать в файле header.scss или мне нужно создавать под каждый блок отдельный файл (ну это бред же).
Просто на самом сайте бэм написано:

разделение кода на отдельные части — логика работы каждого блока, его опциональных элементов и модификаторов описывается в отдельных файлах;

Или это нужно применять только в случае если блок точно будет повторятся?
Но если это так, то значит нет смысла создавать новый блок и миксовать его с элементом, так как обращение в scss все равно будет идти к элементу от родительского блока? Например:

<header class="header container row space-between align-center">
      <div class="header__logo logo">   <!-- Нет смысла здесь создавать блок logo?Ведь он уникальный на всем сайте -->
        <a class="logo__link" href="/"><img class="logo__image" src="/assets/logo.0241cb85.svg" alt="Логотип" /></a>
      </div>
</header>

А если и можно создавать такой блок, то как к нему обращаться в scss?В каком файле?Во вложении header по &__logo или по .logo?

Comments

[Ankhena]

или мне нужно создавать под каждый блок отдельный файл (ну это бред же).

Тем не менее так и нужно.

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

Правильно.
Именно для этого и делают миксы.
header__logo logo это микс.
Внешняя геометрия при этом пишется элементу.

Нет смысла здесь создавать блок logo?Ведь он уникальный на всем сайте

Уникальный - не значит, что он навсегда привязан к header.

[Сергей delphinpro]

создавать под каждый блок отдельный файл (ну это бред же).

Это не бред. Именно так и следует делать.

[Сергей delphinpro]

Надо учиться мыслить в четвертом измерении. Я про время. Сайт живёт. Он изменяется. Как он будет изменяться через месяц или через год вы не знаете.
Например, если взять тот же пример с логотипом. Сегодня одна шапка на весь сайт, и один лого всегда в одном месте. Завтра клиент захочет сделать промо-страницу. На ней будет к примеру совсем другая шапка, а логотип тот же, но в другом месте и допустим слегка больше по размерам. Что вы будете делать? Я скажу - говнокодить.
А если изначально все по уму сделано, то можно написать отдельную шапку .promo-header, добавить логотипу новый модификатор .logo_size_large и никакого геморроя.

[godsplane]

Сергей delphinpro, я понял смысл бем наконец то

Answer 1

[Вадим]

В header.scss вы должны описывать только стили для header__logo. И то по упрощённой схеме. Потому что в методологии для каждого блока, элемента и модификатор предлагается создавать отдельные файлы, которые потом сборщиком проекта подключаются.

Стили для .lang в файле lang.scss.
Если нет сборщик которые сделает это в автомате, то пишут в основном файле стилей include и перечисляет какие блоки нужно подключить.

Будет ли блок повторяться в более менее крупных проектах далеко не всегда известно заранее. Соответственно, лучше сделать это сразу, чем выделять потом.

Comments

[godsplane]

Но создавать под каждый блок новый файл, это что будет с проектом через пару страниц?Сколько в среднем узлов на одной странице / 2-3 выделив только блоки

[Вадим]

godsplane, ну, с проектом будет как ни странно - чёткая структура. Не совсем понимаю о чем вы переживаете.
С проектом без структуры все то же самое, только ещё и полная мусорка с сильной связностью кода который сложно поддерживать

[godsplane]

Вадим, а что за инструмент автосоздания файлов под бем?

[Вадим]

godsplane, современные инструменты не подскажу, так как не упарываюсь до такой степени в работе. Но можно погуглить бэм стэк и типа того. Может завтра как за компом буду найду что то

[Сергей delphinpro]

godsplane,

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

Примерно это (и это нормально):

spoiler