Кто-Нибудь может кинуть репозиторий с хорошей реализацией БЭМ в связке

с Vue? просто почитать. А то я плохой код, где БЭМ вызывал кучу прблем и не решал ни одной видел, а вот хорошую реализацию ни разу.

а зачем вообще бэм в фреймворках с компонентным подходом?)

Некоторым не нравится делать компонент на каждый микроблок, в котором один див с классом блока

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

Ещё приходится renderStubDefaultSlot в тестах включать)

мне вот тоже это интересно, что ждёт работодатель, когда пишет про БЭМ в вакансии

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

а так, наверное, ждут, что ты просто хотя бы знаешь, что это такое

просто одна компания вообще после общения с HR'ом выдаёт ссылку на сайт с вопросами и там типо сверстай плеер по БЭМ, опиши свой опыт по создание фреймворков, напиши реализацию MVC и так далее

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

А какие проблемы, кроме "длинных именования"?

их на самом деле много, на мой взгляд, но часть из них все-таки субъективна: - абсолютно стремный и дурацкий нейминг с кучей визуального мусора в виде —__ - грязный шаблон из-за раздутых названий, который сложнее читать, часто из-за этих длинных названий нужно переносить атрибуты на новую строку - шанс на опечатку выше среднего - section-button__search и section-button___search на глаз едва ли отличаются, а вот сколько там черточек - не скажу - абсолютно отвратительная идея с конкатенацией названий через &, которая напрочь ломает поиск по стилям, поощряет глубокую вложенность и делает чтение стилей головной болью, а без конкатенции мы получаем кучу копипасты производных классов - в современных фреймворках есть свои способы изоляции стилей между компонентами, куда более удобные, реализованные на уровне софта, а не на ментальном уровне - если говорить про Vue, то гарантия изолированности ровно на том же уровне, что и при scoped без бэм - стили с рутовых нод протекут, если воображение разных разработчиков вдруг совпало по какой-то причине

на первой работе был проект, в котором все стили сделали глобальными и писали по БЭМ. Как результат: менеджер видит, что на одной странице съехал один инпут. Ставит задачу его поставить на место. Его сдвигают. Менеджер все проверяет. Этот инпут на месте, но другой инпут на другой странице съехал на столько же в другую сторону. И такая хрень продолжалась несколько дней, пока не поставили задачу всё отрефакторить. Когда эту задачу кинули мне, я был уже четвёртый исполнитель. Что делали первые 2, хз. Но третий день промучался, психанул и уволился. Надо было последовать его примеру)

Это не проблема наличия БЭМ, а обычные проблемы, возможно, с его же использованием. Если бы вместо блока был компонент при такой вёрстке, была бы та же самая проблема

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

При правильном описании стилей по БЭМ стили блока не должны влиять на его расположение. Если он съезжает, там что-то лишнее, что не относится к блоку, а относится к использованию блока в конкретном месте. При замене блока на компонент с такими же стилями, но короткими классами, осталась ты та же самая проблема. БЭМ вообще не про изолирование в первую очередь. И не про именование

ок. покажи пример хорошей реализации БЭВ в связке со Vue

С именованием - понятно. Использование & - вообще не часть БЭМ, лишь возможный инструмент в реализации. Описание бэм во введении их доки: БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste». Ни слова про изоляцию. Изоляция - это побочный эффект, основная задача - это компонентный подход. UI компонент может делаться блоком, может компонентом. То, что для изоляции есть scoped стили или css-модули не делает проблемой использования блоков.

80% проблем людей в том, что они смешивают блоки и позиционирование.

Да, можно всё-всё сделать Vue компонентами. Тогда, конечно, БЭМ не нужен, так как задачу компонентного подхода целиком и полностью берёт на себя Vue. Это же заставляет делать супер глупые компоненты уровне <div class="container"><slot /></div> Я не говорю, что так делать нельзя, но я понимаю тех, кому не нравится иметь десятки таких компонент, где от Vue только возможность упаковать шаблон с классом "в новый тег".

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

Ну утилитные классы тоже не про бэм

в данном случае container можно назвать как утилитарным классом, так и бэм-блоком, суть не поменяется

Мне тоже больше нравится делать компонентами все виды блоков, я просто понимаю тех, кому не нравится заводить отдельный модуль с Vue компоненто ради статичного дива с классом

вот ты сам сказал, что "основная задача - это компонентный подход". А что тогда по твоему Vue делает?

А где противоречие?

если 2 вещи решают одну и ту же задачу, от одной надо избавиться

По поводу & - это действительно не часть бэм, но это есть почти в каждом проекте, где используется бэм, поэтому я упомянул про это в любом случае, если не использовать конкатенацию, то мы получаем копипасту производных именований, что тоже затрудняет чтение, хоть и в меньшей степени уже >Изоляция - это побочный эффект, основная задача - это компонентный подход. мне кажется, что в реальности используют бэм исключительно ради изоляции и избежания коллизий но если опираться на описание, то мне кажется логичным, что “компонентный подход на коленке из 2005-ых” не нужен в фреймворке с настоящим компонентным подходом >То, что для изоляции есть scoped стили или css-модули не делает проблемой использования блоков. а для чего может понадобиться, например, использовать бэм вместе с css-модулями?) назначение бэм и его цели, безусловно, понятны, но непонятно, зачем он нужен в современной разработке

И вот тут vuetify и quasar столкнулись лбами

ответ на свой последний вопрос я увидел в твоем сообщении, так что он уже не актуален)

поддержу, да и такой подход легче читается и воспринимается, что ли, все равно мыслим в рамках компонентного подхода