Разделение блоков по вендорам

Форум /

Привет! А расскажите, пожалуйста, есть ли общепринятый способ, как избежать конфликтов имен блоков, пришедших из разных источников (от разных вендоров)? Где почитать?

Интуиция подсказывает, что раз есть большие компании, поддерживающие свои библиотеки блоков, наверняка же кто-то предусмотрел, что однажды кому-то понадобится подружить в одном проекте popup из библиотеки Яндекса и popup из библиотеки (условно) Mail.ru.

(поиск по "бэм вендор префикс" внезапно показывать что-то не то =))

Thx!

8 years ago

dubrowsky

Добавлю немного конкретики. У нас цмска с модулями. Модули разбиты по вендорам. Например, я - вендор dubrowsky, выпускаю модуль ui со своими заготовками, и модуль mini-shop, состоящий из какого-то фарша типа product / delivery / scu, ну и верстка там какая-то тоже есть.

На сервере благодаря такой иерархии у нас более-менее порядок, а в верстке пока бардак - можно называть что угодно как угодно =)

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

<!-- 
    это как бы говорит нам, что надо лезть в 
    /modules/Dubrowsky/MiniShop/Product/discount-price.less
-->
<div class="dubrowsky--mini-shop--product--dicsount-price">
    <span class="dubrowsky--mini-shop--product--dicsount-price__old">
        200 р.
    </span>
</div>

Получается жутковато (даже без единого модификатора). Можно сократить до "вендор-модуль", складируя весь фронт-энд в одной папке внутри модуля, но это как бы не сильно спасает.

Я пока в раздумьях на грани когнитивного диссонанса, в том смысле, что большущие Яндексы-Мейлы обходятся без всяких префиксов, а мне зачем-то надо аж два уровня минимум =)

8 years ago

kompolom

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

8 years ago

a-x-

@kompolom: у них большие команды и они используют других вендоров

Быть может, вы ~~искали~~ хотели написать «не используют»?

8 years ago

a-x-

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

Но идея правильная: если есть внешняя библиотка блоков и она обновляется, то хочется её использовать как есть со специально настроенной сборкой.

8 years ago

a-x-

Есть 3 кейса:

❓ Библиотека некого вендора с css и html
💡 css-библиотека (например существующий в параллельной реальности оксюморон: bem-bootstrap)
💡 проектный БЭМ-неймспейс (это так называется, и вопрос этот очень популярный)

Не очень понятно что делать, если вендор поставляет не только css но и html (или то, что его производит),

т.к. для css можно сделать плагин для постпроцессора, но библиотеки такого вендора это не поможет.

Часто можно просто ограничится ручным изменением нейминга:

мои фантазии на тему

~~было~~ ожидание:

blocks
    dubrowsky
        ui
    bem-bootstrap
        ui

~~стало~~ реальность:

blocks
    dubrowsky-ui
vendors
    bem-bootstrap
        blocks
            ui

levels = ['blocks', 'vendors/bem-bootstrap/blocks'];

Если хочешь, можно обсудить как должен работать плагин к постпроцессору css во 2-ом и 3-ем случаях

8 years ago

dubrowsky

Ну у меня пока маленькая уютная песочница, где я как скажу, так и будет - то есть мне не надо постпроцессить легаси-код, написанный без префиксов, мне достаточно объявить "теперь пишем с префиксами вот-так-вот, иначе не взлетит" =) Задача-минимум - понять, что это за "вот-так-вот".

То есть надо определиться с синтаксисом для неймспейсов, грубо говоря. Как не размазывать неймспейс по коду - другой вопрос, с препроцессором будет 1 указание на файл, а если добавить магии - можно и снаружи подсовывать.

"Фантазии на тему" че-то не вкурил =( Эти строчки - это где?

Чтобы оставлять комментарии, необходимо авторизоваться.