Как правильно делать адаптив на PUG по БЭМ при сборке на Webpack?

Question

[Norum]

Как правильно организовать адаптивную верстку по методологии БЭМ? Как я понял для десктопных устройств создается отдельная папка desktop.blocks, а для планшетов и телефонов создается touch.blocks и при сборке через webpack все настраивается так, что если человек заходит на сайт через телефон будут загружаться стили именно для маленьких экранов, НО как правильно это организовать? Например: в папке desktop.blocks лежит папка header с файлами header.pug и header.scss и я копирую папку header с вложенными в нее файлами в папку touch.blocks и в файле header.pug добавляю гамбургер (например) и изменяю стили в scss файлы на медиа-запросы? Или же можно вообще обойтись без папок desktop.blocks и touch.blocks и просто и создать папку blocks, в которой так же будет храниться папка header с pug и scss файлами и там создать media.scss и именно для header-а прописать свойства для адаптива и через webpack подключить ее? Но тогда как webpack поймет, что именно на маленьких экранах нужно подключить этот media.scss?

Answer 1

[Иван В]

Или же можно вообще обойтись без папок desktop.blocks и touch.blocks и просто и создать папку blocks

Да, так проще и удобнее.

...и там создать media.scss и именно для header-а прописать свойства для адаптива и через webpack подключить ее?

А вот тут лишнее усложнение. Медиазапросы можно прописать в header.scss. Отдельный media.scss не нужен.
1) если есть желание делать по БЭМ, то в документации вполне подробно написано про варианты файловой струкртуры. Про отдельные файлы со стилями медиазапросов там нет.
2) отпадает вопрос с Webpack.
3) нет 100% правильного варианта, делай чтобы тебе и тем кто будет работать с твоим кодом было удобно поддерживать проект.

Comments

[Norum]

да если бы я знал как удобнее мне) а если прописывать медиа-запросы прямо в scss файле это не затруднит читаемость кода?