Ребята сделали набор переменных для реализации изингов в stylus
Принимаем ишью и пул реквесты пожелания Пользуйтесь :)
https://github.com/factorymn/bem-factory/tree/master/common.blocks/easing
Ребята сделали набор переменных для реализации изингов в stylus
Принимаем ишью и пул реквесты пожелания Пользуйтесь :)
https://github.com/factorymn/bem-factory/tree/master/common.blocks/easing
Ресеты — общепринятая практика. Многие фреймворки сначала приводят все к общему виду, а потом накладывают свои классы. А БЭМ не рекомендует общие ресеты. Это так? Почему? И что предлагается вместо этого?
Что делать, если у блока очень глубоковложенная структура? block__elem1__elem2__elem3
выглядит устрашающе.
Привет. Хочу подгрузить скрипт с https://buttons.github.io помощью loader_type_js Но там указан тег script с аттребутами async, defer и id="github-bjs". Как то можно это указывать через модуль loader_type_js? Подскажите как правильно реализовать
<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
Ввиду нетривиальных конфигов enb(Возможно только для меня), не понятно как использовать BH на клиенте. Хотелось бы посмотреть примеры использования. Интересно, какова судьба BEMHTML в связи с появлением BH.
Часто структура проекта на bem выглядит как-то так:
desktop.bundles
|--somebundle
|--blocks
|--somebundle.bemdecl.js
После сборки enb складывает всё что он насобирал в somebundle. Проблема в том, что в WebStorm нельзя исключить из проекта только часть директории. Кто как решает эту проблему?
Записал видео что бы было понятно. https://yadi.sk/i/OWFoBa18cP3j4
Это два самостоятельных блока, но в одном состоянии блока more
может использоваться блок button
над которым хочется производить какие то действия в зависимости от состояния блока родителя. Сейчас есть баг, он заключается в том что, когда нет hover на button
то соответственно модификатор этого блока убирается. Но остается hover на блоке родителе more
который должен транслировать этот hover на внутренний блок button
Как сделать правильно, что бы было ожидаемое поведение? Не хочу через стили.
Написал такой код:
modules.define('more', ['i-bem__dom', 'control'], function(provide, BEMDOM, Control) {
provide(BEMDOM.decl({ block : this.name, modName : 'type', modVal: 'link', baseBlock : Control }, {
onSetMod : {
'js' : {
'inited' : function() {
this._button = this.findBlockInside('button');
}
},
'hovered' : {
'true' : function() {
this.__base.apply(this, arguments);
this._button.setMod('hovered');
},
'' : function() {
this.__base.apply(this, arguments);
this._button.delMod('hovered');
}
}
}
}));
});
Всем привет. Не разобрался как прикрутить LESS для тестового проекта, буду рад если подскажете как.
Всем привет. У меня не получается добиться от bem-server того, чтобы он каждый раз пересобирал итоговый html при обновлении страницы. Приходится отключать его и делать bem make, затем заново включать. Очень неудобно. Как можно заставить его делать это автоматом? Также если его запускать из корневой директории проекта, например start-pretty-project, а затем, по папкам перейти в директорию index, то можно обнаружить, что до css файла сгенерировался некорректный путь (без папки index). Если же в консоли запустить bem-server из папки index, то путь генерируется корректный и все отображается как надо. Как поправить? Ткните, плз, чтобы время не терять.
Я хочу использовать общее название модификатора, обозначающего роль блока. Например, есть некий блок login-form, и в нём два одинаковых блока input (с ролями login и passworrd), и два блока одинаковых button (с ролями submit и register). Скрипт блока login-form будет искать внутри каждого login-form блоки input и button, и в зависимости от их роли описывать поведение.
Как назвать такой модификатор?
-input_type_login Точно не то, предполагает серьёзные различия блоков, а мой модификатор будет навешиваться даже на что-то динамически генерируемое. Например, подгрузятся несколько постов, и чтобы различать их в скрипте, будут они post_type_1245, post_type_1246.
-input_id_login Лучше, но тоже не подходит, идентификатор предполагает всё же нечто уникальное, а блоков логина может быть несколько (при условии, что они будут в разных login-form)
-input_role_login Тоже как-то странно будет видеть post_role_1247.
Может всё же есть подходящее слово? Ещё я не уверен, делать ли это модификатором, или, например, кастомным аттрибутом, но кажется, что модификатором всё же лучше.
Очень не удобно искать теги без сортировки, тем более, что редактирование меняет ширину - и все теги фактически перемешиваются.
Как и зачем появилось поле tech
в deps.js
файлах? В докладе о БЭМ Виталия Харисова ясно, что под технологиями он имеет в виду расширения файлов - https://tech.yandex.ru/events/yasubbotnik/minsk-jun-2012/talks/95/ (смотреть с 20:40).
Например сейчас в библиотеках есть такие "технологии":
.spec.js
- тесты.md
- описание API.js
- JavaScript.vanilla.js
- Клиентский JavaScript .css / .sass
- стилиВсе они однозначно определяются по расширению файла. Соответственно возникает вопрос - есть ли реальные usecases поля tech, которые не покрываются расширениями?
Всем привет. Как заставить BEMHTML генерить не сжатый, а нормальный "бьютифицированный" код HTML? Спасибо.
По-моему это неправильно, вверх должен поднимать только последний коммент, тк в посте появилось что-то новое. Метки — не настолько новое.
Есть ли сравнение преимуществ использования BEM в CSS относительно AMCSS, OOCSS, SUITCSS или SMACSS? В чем принципиальные различия?
Что отвечать на вопрос "чем вы лучше вот этих парней"? — ответ "мы были первые" слабо убеждает людей использовать БЭМ. Большинство идут за "хипстерскими" и более свежими подходами, нежели за проверенным временем.
Спасибо миксам — можно сделать модификаторов, соответствующих CSS-свойствам, и размещать их на блоках и элементах в разных комбинациях. Однако, говорят, что это "плохо". Вот, например, на этот селектор были жалобы block__elem_border-bottom_5px
. К сожалению, не удалось выяснить подробности. Вы можете пояснить, почему плохо?
Всем привет!
У меня есть три вопроса, помогите, кто может:
Буду премного благодарен за любые пинки, я уже 3 часа промучался, ENB конфигуратор не предлагать:)
Почему бы не написать button.button
? Ведь если человек напишет <h2 class=”button”>
, он прострелит себе ногу, а так мы предотвратим это.
Что плохого может случиться?
Зачем нужны классы блоков? Ведь у блока уже есть индентификатор — имя тега, его можно сделать кастомным. Почему не используются селекторы тегов на блоки и элементы, а классы — для их модификаторов?
Я в нескольких докладах про БЭМ слышал, что основной причиной для введения таких длинных классов было ускорение работы в Internet Explorer. Актуально ли это сейчас? Есть ли у вас бенчмарки?
P.s. вспоминается аналогичная история с on-click против data аттрибутов :)
Говорят, что не приветствуются глобальные модификаторы типа visible, invisible, green, red, opacity50 и так далее? Почему? Можно же написать какие-то общие свойства в такой селектор и потом приписывать его к разным блокам.
Не нашел примеров использования параметров data-bem. Как использовать и в каких случаях?
БЭМ рекомендует писать
Не могу найти поиска по Форуму. Если уже обсуждалось — дайте, пожалуйста, ссылку. Или научите искать по Форуму, если это возможно.
Подскажите, пожалуйста, как победить сабж?
Сборка без кэша не ломается, однако i-bem не объявляется в клиентском js.
bem-core@2.4.0
Пытаюсь оформить код согласно этому https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet, получается абракадабра
Добрый день.
Пытаюсь сделать так:
index.bemjson.js
({
block: "page",
title: 'index',
head: [
{ elem: 'css', url: '_index.css' }
],
scripts: [{ elem: 'js', url: '_index.js' }],
content: [
{
block: 'simpleBlock'
}
]
})
simbleBlock.bemhtml
block('simpleBlock')(
js()(true),
tag()('div'),
content()(
{
block: 'button',
text: 'Click Me',
mods: {
theme: 'normal',
size: 'l'
}
})
)
simpleBlock.deps.js
({
mustDeps: [
{
block: 'button'
}
]
})
Проект стандартный project-stub. Что не так?
Добрый день! Интересует архитектурный вопрос: возможно ли использование методологии и технологий БЭМ совместно с Java EE. Проще говоря: бекенд - javaee - фронтэнд - на бэме. Пробовал ли кто то сделать подобное, и что получилось? Представляется два варианта:
| javaee application server | <-> | browser|
| (совершенно непонятно как организовать это взаимодйствие)
| bem |
Выглядит костыльно.
Второй вариант выглядит похожим на правду, но может есть ещё варианты?
Не могу разобраться с шаблонизацией на клиенте. Есть два блока content и list. Как сделать чтобы из блока content был виден шаблон list? Какие зависимости надо подключать и в каком порядке?
пробовал так:
modules.define('i-bem__dom', ['BEMHTML'], function(provide, BEMHTML, BEMDOM) {
BEMDOM.decl('content', {
onSetMod: {
'js':{
'inited': function(){
BEMDOM.append(
this.domElem,
BEMHTML.apply(
{
block: 'list'
})
);
}
}
}
});
provide(BEMDOM);
});
Я пользуюсь roole в обычной работе. Иногда использую дизайн из bem-components. Там он на stylus. Как сделать так, чтобы все это собиралось вместе?
кусок make.js:
MAKE.decl('BundleNode', {
getTechs: function() {
return [
'bemjson.js',
'bemdecl.js',
'deps.js',
'roole',
'stylus',
'css',
'ie.css',
'ie9.css',
'bemtree',
'bemhtml',
'node.js',
'spec.js',
'browser.js+bemhtml',
'html'
];
},
getForkedTechs : function() {
return this.__base().concat(['roole','stylus', 'browser.js+bemhtml']);
},
getLevelsMap : function() {
return {
desktop: [
'libs/bem-core/common.blocks',
'libs/bem-core/desktop.blocks',
'libs/bem-components/common.blocks',
'libs/bem-components/design/common.blocks',
'libs/bem-components/desktop.blocks',
'libs/bem-components/design/desktop.blocks',
'libs/constructor-blocks',
'common.blocks',
'desktop.blocks'
]
};
},
В такой конфигурации stylus обрабатывается, но не попадает в _index.css