У нас есть блок "Кнопка", у нее есть дочерний элемент "Кнопка__иконка" и модификатор "Кнопка--Иконка-Слева"(уменьшает отступ слева, чтоб иконка смотрелась лучше).
У этой кнопки есть три модификатора размера (sm,m,l). У каждого размера будет разный отступ слева при модификаторе "Кнопка--Иконка-Слева".
Добавим изменение размера "Кнопка__иконка" для разных размеров кнопки (если это иконочный шрифт можно использовать font-size всей кнопки, но мы как современные используем svg иконки и размер нужно задавать вручную).
<Button>
<Button__icon><Icon ... /></Button__icon>
<Button__body>Текст на кнопке</Button__body>
</Button>В идеале нужна структура, чтоб видеть все связи (пример выше), для быстрого доступа к нужному свойству, но также инструмент, который умеет удалять не нужные стили по связям. Удалив элемент "Кнопка__иконка" в сборку не должны попасть модификаторы "Кнопка--Иконка-Слева" разных размеров.
Может кто то встречался с решением или рекомендациями по данному вопросу.
const fs = require('fs');
const miss = require('mississippi');
const html2bemjson = require('html2bemjson');
const bemjsonToDecl = require('bemjson-to-decl');
const src = require('gulp-bem-src');
const gconcat = require('gulp-concat');
const vfs = require('vinyl-fs');
src(
['path/to/blocks'],
bemjsonToDecl.convert(
html2bemjson(
String(fs.readFileSync('path/to/your.html')))),
'css',
{ // дополнительные настройки
skipResolvingDependencies: false, // отключаем зависимости
{
'path/to/blocks': { scheme: 'nested' } // у 'path/to/blocks' схема nested
}
}
).pipe(gconcat('path/to/your.css')).pipe(vfs.dest('.'))<div class="text">
<h1>Caption <small>Some Foo Bar</small></h1>
<article>
<p>Lorem ipsum...</p>
<div class="text__p">Dolor sit...</div>
</article>
</div>.text h1, .text__title { /* main title styles */ }
.text h1>small, .text__sub-title { /* sub-title styles */ }
.text p, .text__p { /* paragraph styles */ }mkdir ./app.blocks/hello-world/ -p
touch ./app.blocks/hello-world/hello-world.cssnpm i bem-tools
bem create level app.blocks
bem create block -l app.blocks hello-world// Допустим, у нас есть выгруженные шаблоны на фронт
bh.match('users-list', function ... );
bh.match('user', function ... );
// etc.
// дальше мы должны получить данные с бекенда, для простоты укажем их явно
var usersFromBackend = [{name: 'Vasya', id: 5}, {id: 42, name: 'Petya'}, ...];
// как получили — собираем каким-то образом некую view-ориентированную структуру типа:
var viewOriented = {
// здесь можно использовать и что-то более умное
block : 'users-list',
content : fromBackend.map(function (el) {
return {
block : 'user',
// привязываем к users-list по БЭМ
// (мало ли понадобится что-то в стилях-скриптах подтюнить)
mix : { block : 'users-list', elem : 'item' },
// выводим контент в каждый div
content : {
block : 'link',
mix : { block : 'user', elem : 'link' },
url : el.url || '/users/' + el.id,
text : el.name
}
};
})
};
// И после получаем готовый HTML еще одной операцией, который останется куда-то вставить
console.log(bh.apply(viewOriented));if (!$dbconn) {
echo "Произошла ошибка подключения к базе.";
}if (!$dbconn) {
echo json_encode(["error" => "Произошла ошибка подключения к базе."]);
}// сортируем
var sorted = $scope.dis.sort(function (a, b) {
return a.name > b.name? 1 : -1;
});
// собираем сам массив
var sortedWithGroups = sorted.reduce(function (res, a) {
// добавляем дополнительно букву перед первым словом на новую букву
// если это первое слово на эту букву
if (res.lastGroup !== a.name[0]) {
res.lastGroup = a.name[0];
res.push({name: a.name[0], group: true});
}
// добавляем саму ссылку
res.push(a);
return res;
}, []);