Какое правильное разделение файлов в БЭМ?

Question

[runprogr]

В методологии БЭМ для каждого блока требуется создавать новый файл.
Допустим у нас есть такая структура

<div class='wrapper'>
    <header>
        <div class='block-1'>
            <div class='block-1__elem-1'>
            </div>
        </div>
    </header>
    <section class='section-1'>
        <div class='block-2'>
            <div class='block-2__elem-1'>
            </div>
       </div>
       <div class='block-3'>
           <div class='block-3__elem-1'>
           </div>
       </div>
    </section>
    <section class='section-2'>
        <div class='block-4'>
            <div class='block-4__elem-1'>
            </div>
       </div>
    </section>
    <footer>
    </footer>
</div>

1) В каком файле мы прописываем стили для .wrapper ? Поскольку это не блок, я так понимаю, что создавать файл не надо и стили надо прописывать просто в начале main.scss ?
2) В каком файле прописывать стили для header, footer, section-1, section-2 ? Они не являются блоками по БЭМ, насколько я понимаю, значит ли это что их надо описывать в main.scss или все таки надо создавать отдельный файл под стили для каждой секции ?
3) Допустим нам надо section-1 сделать display: flex , а блокам block-2 и block-3, нахоядщимся в этом flex-контейнере, настроить свойство order или flex-grow. Если нам надо изменить это свойство у одного блока, соответственно придется менять и у всех остальных, находящихся в section-1. Придется лезть в файл каждого блока и менять свойства, что не слишком удобно, особенно если блоков много. Правильно ли такие свойства записывать именно в каждый блок, или для удобства их следует выносить в main.scss, или еще куда то?
4) Можно ли прописать в начале main.scss, к примеру, font size для body, или обязательно в каждом блоке отдельно объявлять font-size ? Даже если мы используем переменные, насколько я понимаю, это не спасает нас от огромного дублирования кода в итоговом css файле, если каждое свойство объявлять для каждого блока.
5) Правильная практика - помещать все медиа запросы, относящиеся к блоку в файл с версткой этого блока, или должен быть отдельный файл под все медиа -запросы ?

Answer 1

[VHeX86]

каком файле мы прописываем стили для .wrapper ? Поскольку это не блок, я так понимаю, что создавать файл не надо и стили надо прописывать просто в начале main.scss ?

Почему не блок? Он вполне может быть блоком без смыслового функционала. Оберточный. Так же через него, через его элементы позиционируются вложенные в него блоки.

2) В каком файле прописывать стили для header, footer, section-1, section-2 ? Они не являются блоками по БЭМ, насколько я понимаю, значит ли это что их надо описывать в main.scss или все таки надо создавать отдельный файл под стили для каждой секции ?

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

Если нам надо изменить это свойство у одного блока, соответственно придется менять и у всех остальных, находящихся в section-1.

Блоки не должны влиять друг на друга, это основопологающая идея БЭМ. Если блоки связаны или влияют друг на друга это уже не БЭМ, а что-то похожее на него. Так же внутри блока следует избегать использования каскада и наследования, это может внести дополнительную путаницу и увеличить связанность блока.

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

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

это не спасает нас от огромного дублирования кода

От дублирования кода спасают миксы. Читайте про них здесь

5) Правильная практика - помещать все медиа запросы, относящиеся к блоку в файл с версткой этого блока, или должен быть отдельный файл под все медиа -запросы ?

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

<head class="head"> 
<div class="block head__block"> </div>
</head>

Соответственно блок класса .block c примиксованным классом .head__block является элементом блока .head и можно менять его геометрию и позиционирование через класс .head__block используя медиазапросы например. Естественно элемент head__block с медиазапросами будет храниться в блоке head и лежать в его подпапке с элементами.
Другой случай это когда через медиа запросы меняется например стиль блока, скажем его цвет. Тогда медиа запрос должен быть внутри блока, а конкретно в его модификаторе например в данном случае у блока block может быть модификатор block_red в котором будет медиазапрос со свойствами при маленьком экране окрашивать элемент в красный. Этот файл с медиазапросами уже будет находиться в родном блоке block в подпапке с модификаторами.
Если где-то не согласны или я ошибся пишите в комментарии обсудим.

Comments

[runprogr]

Спасибо, очень подробно описали, вроде понял что к чему

Answer 2

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

1) можно создать отдельный файл для сетки и прописать там. Если нет сетки то сделать его page__wrapper.
класс page повешать на боди
2) сделать их блоками по бем. Вообще это и есть блоки в твоем примере. Все что внутри лучше сделать элементами и выносить в блоки только если нужно переиспользовать еще где то.
3) все изменения блоков через модификатор. При этом блок ничего не знает о своем положении, оно задается через элемент родительского блока
4) для этого можно сделать файлик с базовыми стилями
5) все что относится к блоку в его файле

Comments

[runprogr]

Спасибо, полезно

Answer 3

[Анита Ковалева]

Я обычно разделяю так: ---------> сделаю на примере синтаксиса sass

main.sass     --------> файл где хранятся глобальные стили(импорты, body, wrapper(центровщик) и тд.
var.sass       -------> переменные с цветами, размерами которые импортируются в main.sass
/blocks/*.sass ------> подпапка в которой хранятся все блоки.

blocks/header.sass ------> хранятся общие стили для блока header, с позиционированием элемента logotype.
blocks/logotype.sass -----> общие стили для логотипа без позионирования блока

А теперь самый главный момент который я поняла, такие вещи подходят когда вы делаете большой, сложно компонентый проект, если вы разрабатываете мелкий корпоративный сайт или лендинг, можно смело "рубить сайт" на отдельные крупные блоки(header,footer,section) - а элементы\блоки, повторяющиеся много раз как logotype выносить в main.sass.

Comments

[runprogr]

Полезно, спасибо за инфу

Answer 4

[Алексей]

1. Общий файл стилей либо файл other.scss. Не столь важно ибо на выходе должен быть один файл стилей
2. Для хедера и футера свои файлы header.scss и footer.scss
3. Порядок элементов можно изменить добавив класс с соответствующим свойством нужному элементу например класс с модификатором _order. Модификаторы пишут рядом с основными стилями блока
4. font-size задавайте только там, где меняется шрифт. Если не хотите дублирования используйте extend в scss
5. Я предпочитаю хранить медиазапросы в том же файле где стили блока, в самом конце

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

Comments

[runprogr]

Спасибо за помощь!

Answer 5

[Dubrovin]

Мы разрабатываем под WordPress по методологии БЭМ и придерживаемся следующих правил:
1) Отдельный блок (компонент) включает в себя файл инициализации php, файл шаблона php, один или несколько файлов css - под модификаторы стилей создаются отдельные файлы, файл javascript.
2) Под каждый блок создаётся своя папка
3) В зависимости от блока у него может отсутствовать JS, CSS, файл инициализации или темплейта, например, у блока "Анимация" нет темплейта, но есть CSS и JS.
4) Для нативных тегов HTML без классов есть отдельный блок Component, в котором прописываются стили, например, для типографики

Конкретно по вашим вопросам:
1,2) header, footer и wrapper - должны быть или отдельными блоками, тогда вам нужно в header прописать класс header, а в footer прописать класс footer, либо должны быть элементами более общего блока, например, layout, тогда будет файл layout.css в котором вы пропишите стили для header, footer, wrapper.
Секция также является отдельным блоком.
3) Блокам block2 и block3 миксуются классы section1__block2 и section1__block3 и css прописывается только блоку section1
4) Можно, и даже нужно, если это исключает дублирование кода, но таким образом вы создаёте зависимость одних компонентов от других (это может быть как хорошо, так и плохо, в зависимости от архитектуры вашего кода). Вообще БЭМ - это не про жёсткие правила
5) Медиа-запросы должны быть частью блока "Сетка с колонками". Все остальные блоки помещаются в эту сетку при необходимости.

Comments

[runprogr]

Спасибо, хорошо расписали