Если используется централизованное получение данных с бекенда, в чем преимущества использования bemtree по сравнению с прямым формированием полного дерева bemjson бекендом?
Только начал разбираться с БЭМ, в статьях написано о том что блок и шаблонизатор не знает расположения бекенда.
А кто о нем должен знать? В частности откуда в форму приходит action? То же самое для AJAX запросов.
Есть ли готовые компоненты с поддержкой AJAX ? Где их искать ?
Подскажите пожалуйста есть ли реализация bem вкладок tab?
Добрый всем день! Возникла необходимость стилизовать скролл у компонента select. Насколько я поняла у библиотеки bem-components нет такой возможности. Подскажите, как можно поступить в такой ситуации? Подключить плагин по типу - http://www.rudebox.org.ua/tiny-scrollbar-plugin-for-band-scrolling/
И второй вопрос, подскажите пожалуйста по подключению скриптов. Если скрипт используется только на одной странице, например настройки слайдера, карты, какой-то анимации, их нужно склеивать в общий файл скрипт? На данный момент я создала отдельную папку scripts, из которой просто копирую эти отдельные скрипты в папку проекта, а те скрипты, которые нужны блокам на всех страницах, склеиваю в общий scripts.js. Правильно ли я делаю? Спасибо за ответы
Всем привет подскажите пожалуйста, в итоговом css путь к картинке меняется на относительный путь к блоку. Например: (../../common.blocks/icon/_image/i/cart.png). В .borshik прописано "i/**": "/images/". В make.js enb следущее [borschikTech, { sourceTarget: '?.css', destTarget: '?.min.css', tech: 'cleancss', freeze: true, minify: isProd }]. Я так понимаю борщик не работает, а пути меняет сам enb?! Как это исправить?
Добрый день коллеги по цеху. Разрабатываю архитектуру крупного e-commerce проекта. Мне очень нравится декларативный подход БЭМ как идея, методология и подход к проектированию фронтенда со своей системой сборки. Вообще считаю что фронтенд должен быть полностью отделен от бэкенда, роль которого только заниматься доставкой "сырых" данных. А общаться фронт и бэк между собой должны по API. Следовательно получаем следующую архитектуру:
Все запросы через балансер распределяются на фронтенд кластер из nodejs серверов, которые в свою очередь являются неким прокси к кластеру из backend серверов, которые формируют bemjson-дерево из исходных данных в БД и отдает html
Но в реальном мире все немного по-другому. На бекенде будет использоваться готовая e-commerce платформа внутри которой тяжелое java enterprise приложение. Оно уже из коробки имеет свой встроенный шаблонизатор jsp. Его, конечно можно не использовать, но с одной стороны у бизнеса есть четкие сроки запуска проекта, с другой стороны у подрядчика есть опыт классического внедрения этой платформы с использованием шаблонизатора jsp и нет опыта проектов на БЭМ.
Собственно вопросы следующие:
1) Похвалите/раскритикуйте следующий план внедрения: На первом этапе сделать верстку и сборку бандлов по БЭМу и запихнуть все это в шаблонизатор jsp На втором этапе уже разделить полностью фронт и бэк, т.е. перейти на full stack bem
2) Как вы решаете вопросы хранения и обмена пользовательских сессий между фронтом и бэком? Например по адресу mysite.ru/catalog я хочу получить персонализированный список товаров и цен для конкретного авторизованного пользователя. В этом случае нода должна либо хранить сессию пользователя, либо каждый раз опрашивать бэк?
3) Вы делаете несколько репозиториев .git ? Один отдельно для фронта и второй для бекенда? Однако некоторые фичи требуют одновременно изменений фронта и бэка и следовательно должны релизится одновременно. В этом случае удобно все хранить в одном репо.
спасибо, всем b_
Если не трудно, подскажите пожалуйста еще такой вопрос, чтобы в проекте использовать другие слайдеры, скажем owl-carousel, http://owlgraphic.com/owlcarousel/#demo, достаточно ли будет только разметку в html сделать по БЭМ, ну и стили css слайдера соответственно, или же это плохая практика и желательно использовать только bl-slider ? Спасибо еще раз за ответы
Всем добрый день, я снова к вам за помощью новичку. Подскажите пожалуйста по такому вопросу, у меня в проекте используется стиль именования Гарри Робертса. Я хочу подключить библиотеку bem-components (из коробки bem-components-dist), чтобы использовать элементы форм Можно ли я эти элементы переименовать в используемом мной стиле именования, при этом переопределяя стили в своем css, или это нарушит их функциональность Спасибо.
Захотелось собрать документацию к проекту. Поставил модуль из топика, добавил конфиг в make.js по аналогии с bem-components. Доки собрались. Но
- вообще нет стилей
- собрался только markdown. Есть jsdoc.html но он пустой всегда, хотя в блоках есть jsdoc комменты.
Попробовал собрать доки в bem-components - то же самое. Подскажите, как собрать полную, красиво оформленную документацию к проекту, например, как на этом сайте.
Скажите, а есть ли такое место где можно посмотреть список всех библиотек сообщества. Если нет, планируется ли? Для бутстрапа есть bootsnipp для ангулара ngmodules. Я думаю было бы круто иметь место куда можно выложить свои наработки или посмотреть что уже существует перед написанием своего велосипеда.
Сделал на проектном уровне переопределения специальный элемент googlefont блока page для асинхронного подключения гуглошрифтов
В bemjson:
block : 'page',
head : [
...
{ elem : 'css', url : 'index.min.css' },
{ elem : 'googlefont', families: 'PT+Serif:400,700:latin,cyrillic' }
]
В результате наложения шаблона для такого элемента в разметке, в секции head, появится:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'PT+Serif:400,700:latin,cyrillic' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Кто как подключает шрифты? Может нужен такой элемент в стандартной библиотеке?
Где правильнее писать стили для тега html при необходимости? Для себя пока решил написать их в common.blocks/page/page.styl Для сборки использую enb.
Как лучше утяжелить селектор при использовании modernizr? Единственное что приходит на ум, использование !important. Но это считается плохой практикой.
.block {
color: red;
}
.no-feature .block {
color: blue;
}
.block--mod {
color: green !important;
}
1. Rem единицы
Ребят, а почему вы не используете rem единицы? Из-за поддержки ie8? Есть же плагины которые сами считают и проставляют для варианта:
- в rem
- в px
Что-то подобное:
.input {
padding: 1rem .5rem;
padding: 16px 8px; /* Дописывает плагин при сборке */
}
Так сложилось или есть подводные камни?
2. Клонирование темы islands
Я понял что у вас тема – это stylesheet представление блоков (design/.blocks), а вся остальная логика обозначена в .blocks. Форкнул тему, переименовал, добавляю в нее свои блоки, меняю стили и дописываю блоки темы islands. Про форк темы прочитал здесь.
Вопросы:
- Сильно ли я пострадаю от того что замораживаюсь на текущей версии темы? Часто ли происходят глобальные изменения темы? Меняю форматирование в файлах стилей, диффы отследить сложно. Боюсь за то что (например) блок select обновится, а у меня что нибудь да отвалится.
- Стоит ли в теме менять px -> rem?
@tadatuta привет! :-)
Часто говорят о трехзвенной архитектуре, где nodejs является своеобразным прокси к backend api, котоырй формирует bemjson-дерево из исходных данных и отдает html. Где должен находиться роутинг в такой архитектуре, на ноде или на бэкенде?
Есть огромный блок в котором куча разных вложненных блоков разного размера. В tmpl-spec хочется проверить что у блока есть нужные вложенные, при этом хочется чтобы html-differ не проверял содержмое эти вложенных блоков. Знаю, что у html-differ есть регулярки, но почему-то не получается с ними подружитсья: что не пишу, все равно красная простыня в diff.
Что-то как-то нет описания как готовить в сборке enb при помощи enb-bem-docs документацию jsDoc3
Как с этим модулем работать?
Каждый блок имеет модификатор theme. И во всех примерах он пишется непосредственно к блоку
{
block: 'button',
mods: {type: 'submit', theme: 'islands', size: 'l'},
text: 'Search'
}
Хочу чтобы все контролы в проекте получили тему islands по умолчанию. Как это сделать?
Доброго времени суток! Начала писать первый проект по БЭМ, использую методологию (соглашение по наименованию и структуру фауйлов). Прошу помогите пожалуйста проверить, правильно ли я начинаю использование блоков и элементов по методологии. Задача такая, что навигационная панель будет на главной странице будет сначала отличаться по стилю чем на остальных страницах()без фона). При скроле меню фиксируется и будет приобретать такой вид как на других страницах(с фоном)
<body class="b-page b-main-page">
<div class="l-wrapper">
<header class="l-page-header j-page-header">
<nav class="l-navigation l-navigation--main">
<ul class="b-menu b-menu-main">
<li>
<button class="b-button-toggle" type="button" data-toggle="toggle">
<span class="b-button-toggle__sr-only">navigation</span>
<span class="b-button-toggle__icon-bar"></span>
<span class="b-button-toggle__icon-bar"></span>
<span class="b-button-toggle__icon-bar"></span>
</button>
<ul class="b-dropdown-menu b-dropdown-menu-main">
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">О компании</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Блог</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Полезные статьи</a></li>
<li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Помощь</a></li>
</ul>
</li>
<li class="b-menu__item b-menu-main-item"><a class="b-menu__link b-menu__link--active b-link" href="">Рекламодателям</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Владельцам сайтов</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Обмен трафиком</a></li>
<li class="b-menu__item b-menu-main-item"><a href="">Агентам</a></li>
</ul>
<ul class="b-login">
<li class="b-login__item">
<a class="b-login__signin" href="#">Вход</a>
<a class="b-login__signup" href="#">Регистрация</a>
</li>
<li class="b-login__item i-hide">
<a class="b-login__accaunt-user" href="#">alexander.starodumov@gmail.com</a>
<a class="b-login__signout" href="#">Регистрация</a>
</li>
</ul>
</nav>
</header>
<div class="b-promo-header">
<div class="l-container">
<div class="l-promo-logo b-promo__logo">
<a class="b-promo-header-link">
<img class="b-siteLogo__icon" src="http://net-craft.com/wp-content/themes/netcraft/img/siteLogo__icon.png" alt="Net-Craft.com" title="Net-Craft.com" itemprop="logo" />
</a>
<h3 class="b-promo-header-text b-promo-header--text-middle">logo text</h3>
<h1 class="b-promo-header-text b-promo-header-text--big">logo text</h1>
</div>
</div>
</div>
<div class="b-page__section">
<div class="l-container">
<div class="l-row">
<div class="l-row__col_6">
<div class="b-page__text-block">
</div>
</div>
<div class="l-row__col_6">
<div class="b-page__image-block">
</div>
</div>
</div>
</div>
</div>
<div class="l-footer-push"></div>
</div>
<footer class="l-footer ">
<div class="b-page-footer">
<div class="l-container">
<ul class="b-menu b-footer-menu">
<li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">О компании</a></li>
<li class="b-footer-menu__item b-menu-item__itemn"><a class="b-footer-menu__link b-menu__link b-link" href="">Блог</a></li>
<li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">Помощь</a></li>
</ul>
</div>
</div>
</footer>
Спасибо большое заранее за помощь.
Обертки бывают двух типов:
- Про расположение блока относительно других блоков
- Про лейаут внутри блока
Когда сталкиваетесь с первым случаем, чаще всего подойдет микс (либо с элементом родителя, либо с элементом сетки). Например:
<div class="some-parent">
<div class="my-something some-parent__something">...</div>
</div>
либо
<div class="grid">
<div class="my-something grid__col">...</div>
</div>
Еще можно не экономить на лишних DOM-узлах и делать так:
<div class="grid">
<div class="grid__col">
<div class="my-something">...</div>
</div>
</div>
Примером из реальной жизни для этого случая будет позиционирование универсальной кнопки, которая ничего не должна знать об отступах от границ какой-нибудь конкретной шапки.
Как делать не стоит: создавать модификаторы для кнопки, задающие margin и т.п. свойства. Такое позиционирование по смыслу не является частью универсального блока, а лишь его конкретного места использования. Да и модификаторов на всех не напасешься.
Если же обертка относится именно к данному блоку (скажем, позиционирование иконки внутри той самой универсальной кнопки или ограничитель по max-width для контента страницы), то это будет внутренний элемент inner:
<button class="button">
<span class="button__inner">
<span class="button__icon"></span>
</span>
</button>
Блок или элемент с названием wrap не имеет особого смысла, потому что на самом деле примерно никогда не нужно заворачивать конкретный блок в абстрактную обертку.
Здравствуйте. Начал познавать методологию БЭМ, и буквально сразу возник вопрос, касаемо места классов сетки (не использую полный стэк, только методология). Что из этого более верный путь: примешивать класс размера блока к самому блоку в верстке:
<div class="block grid__col_3">
или примешивать миксином непосредственно в css (пример на less):
.block {
color: red;
.grid__col_3;
}
С одной стороны - блок должен быть Абсолютно Независимым, то есть его отображение не должно зависеть от того, какой класс сетки мы ему примешали - он должен выглядеть так, как описан в стиле - аргумент ЗА миксин в css. С другой - блок становится более транспортабельным, мы его можем таскать куда и как угодно, и задавать размер непосредственно в верстке - благодаря миксину в html классе блока мы можем растянуть его как угодно без вмешательства в стили - аргумент ЗА миксин в html классе.
Чутье подсказывает третий вариант: создание модификатора элемента блока. "Семантичненько", и все такое. Но тогда такой модификатор нужно создать для каждого элемента блока - этот оверхэд не окупится, в случае, если нужно изменить размер "контейнера" самого блока, и не более того.
Если я что то дико путаю - прошу поправить, и наставить на верный путь, поделиться своим опытом. Благодарю.
Зарепортила баг: https://github.com/gemini-testing/gemini/issues/270 Прозрачный в Yosemite - это совсем не тот прозрачный что и в El Capitano. Но как с этим справляться самостоятельно? Наверняка это не только Gemini аффектит. Подскажите идеи, пожалуйста.
В нашем проекте где используем БЭМ заметили интересное поведение для некоторых свойств CSS при переопределении и при семантическом объединении борщиком.
[borschik,
techOptions: {
semanticMerging: true
},
//...
]
Это проявляется на старых браузерах или браузере с обрезанным функционалом.
Если свойство, к примеру background объявить в обобщенном виде, а не отдельно по параметрам, пример:
.block {
background: url(i/arrow.png) center center no-repeat;
}
При это в дальнейшем переопределить одно из указанных свойств
.block {
background-image: url(i/yellow-arrow.png);
}
То переопределение может сработать не корректно, и часто поведение (особенно на short-браузерах) будет похоже на гейзенбаг.
Решение пока нашли в том, что все свойства объявляем подробно:
.block {
background-image: url(i/arrow.png);
background-position: center center;
background-prepeat: no-repeat;
}
У меня есть вот такой контрол
Блок select я нашел, а вот label – нет. Какой рекомендованный способ создавать такие контролы? Как согласовать размер соседних блоков, чтобы оба получали 'S', 'M', 'L', ...
Я пользуюсь библиотекой в dist-сборке
Настроена сборка, css и js файлы пропускаются через borschik.
Хочется чтобы внутри css .svg и .png инлайнились, а внутри js .svg и .png указанные через borschik.link ложились в папку images.
Сейчас текущий конфиг такой
{
"freeze_paths" : {
"libs/**": ":base64:",
"libs/**/*.svg": ":encodeURIComponent:",
"*.blocks/**": ":base64:",
"*.blocks/**/*.svg": ":encodeURIComponent:",
"*.bundles/blocks/**": ":base64:",
"*.bundles/blocks/**/*.svg": ":encodeURIComponent:",
"*.bundles/**/images/**": "dist/images"
}
}
Привет. Вопросы про Gemini, точнее про саму идею автоматизации визуального тестирования:
- Как называется такое тестирование, по каким словам гуглить?
- Какие инструменты отличные от Gemini вы знаете? Gemini меня полностью устраивает, но мне интересно посмотреть/почитать как люди внедряли инструменты такого типа и как это повлияло в целом на их процессы.
- Где найти статьи/презентации о таком вот визуальном тестировании? Можно и просто об инструментах, и можно о самой идее автоматизировать всё, в том числе и визуальное.
Спасибо!
Нужно детальное описание для синтаксиса БЭМ. С блоками немного разобрался. Работают. Синтаксис в bemjson такой например:
{
block: 'slider',
content: [
{
elem : 'slider__item',
content : 'blocks'
},
]
},
В папку slider поместил папку с названием slider__item в нее поместил файл slider__item.сss, но стили не работают.
Как вообще правильно. Помещать css элемента в файл css блока или создавать для него отдельный файл?
Поделитесь, пожалуйста, как у вас организовано тестирование кода, какие тест раннеры используете. Примеры приветствуются.
Привет!
Скажите пожалуйста когда будет продолжение серии вебинаров Дмитрия Белицкого? Вот на чем остановились еще пол года назад: https://events.yandex.ru/lib/talks/2890/
На мой взгляд это лучшее что сейчас есть в сети на тему БЭМ!
Добрый вечер. Хочу собрать проект и с путями возникает вопрос, у меня есть '../../images/' , а нужно 'images/'. Кажется, что все тривиально и глупее вопроса сложно придумать, бери да вручную их меняй:) но как-то это не солидно, ведь есть borschik, а он что-то не варится. Хотя, скорее всего, проблема в моем котелке. Настройки make.js [borschikTech, { sourceTarget: '?.html', destTarget: '?.borschik.html', freeze: true }], [borschikTech, { sourceTarget: '?.css', destTarget: '?.min.css', tech: 'cleancss', freeze: true }], [borschikTech, { sourceTarget: '?.js', destTarget: '?.min.js', freeze: true, minify: isProd }] И странно, что запись в .borschik типа {"freezepaths": { "images/**" : "img/"}} меняет только пути .css, не замечая .html. Помогите разобраться