In the BEM documentation, they make reference to something called a "service block":
... In a case like this, instead of creating an element, you need to create a service block.
I can't find any mention of a service block. What does this actually mean?
We are happy to announce the FullStack conference in London. Are you looking for all the latest JavaScript, Node.js and IoT technologies and discover the latest best practices and ideas? You are welcome to the FullStack conference.
This July BEM will be there. Don't think that it will only be about CSS. BEM will present its FullStack platform.
Now is the time of component web. Web Components are actively developing but still have some limitations such as web browsers support. BEM methodology can be applied to any platform and already has implementations which work in all the browsers. It is created as open source software and is suitable for any programming language or any framework.
Let's talk on what do you really know about BEM Methodology and existing BEM Platform. BEM was originated by Yandex more than 10 years ago. It was approved by huge number of large, small and scalable projects, with different developers and changing support teams.
Harry Roberts was one of the first who told about BEM in English speaking world. But he uses only the CSS part of the BEM methodology and doesn't go further. This July at the FullStack conference in London the BEM inventors Sergey Berezhnoy and Vladimir Grinenko will present the Unknown parts of BEM.
BEM is applicable to JavaScript, templates or even native code for mobile apps. In addition to double underscores that changed CSS world, templates and JavaScript written using BEM principles will also significantly change your development process.
BEM has common approach for all technologies: HTML, CSS, JavaScript, docs, tests, etc.
As in CSS, you can change/redefine the appearance of a block, in JavaScript and templates you can change/redefine the behavior of blocks and the layout of tags on a page. The important thing — you do not need to change the initial block implementation, changes will be applied from another redefinition level.
A component-based approach used in the BEM methodology also determines the way that BEM projects are organized in a file structure. In BEM, it's not just the interface that is divided into independent components, i.e. blocks, but the implementation of blocks is also divided into independent parts, namely files.
To ease a work with all BEM components named and stored on a file structure by BEM principles, we created a lot of open source tools.
BEM methodology is simple recommendations for organizing a project that needs to be done quickly, but supported for many years. BEM has a ready-made implementation of these recommendations — BEM Platform — technologies and libraries with open source code.
Want to explore how BEM methodology and platform really work? Join the FullStack conference!
I have a question concerning styles for generic blocks in BEM (for instance .button) vs Media Queries.
The block in BEM (as documentation says) is supposed to have generic styles which will be applicable to all elements on site, let's say I have a ".button" block...
And my button will have reusable styles like:
.button {
font-family:Verdana;
padding:30px 20px;
}
The purpose of that generic button is so that if I were to make "another" button, say "welcome button" with different styles I can write modificator button--welcome which will only add additional styles to .button which at the end will look like this:
<button class="button button--welcome"> </button>
This is where Media Queries PROBLEM comes in. Padding defined in my generic .button can be different for different media queries (I am using border-box so padding are internal styles for .button). For instance padding for max-width:480px can be padding: 10px 5px; Does it mean that I should NOT include padding in my generic .button block because .button will no longer be generic? Or, I can do something like this (but I wonder whether it is valid BEM way):
.button {
font-family:Verdana;
@media and (max-width: 480px) {
padding:10px 5px;}
@media and (max-width: 780px) {
padding:15px 10px;
}
@media and (max-width: 1200px) {
padding:20px 15px;
}
@media and (min-width: 1201px) {
padding:30px 20px;
}
}
Also, I've seen some generic .button blocks with the following code:
.button {
padding: 0.75em 1.25em;
border-radius: 4px;
background-color: green;
color: white;
font-size: 1em;
line-height: 1.5em;
transition: all 0.15s ease-in-out;
}
The issue of generic block styles vs media queries arises in the case of border width, line-height which can be different for different media queries.
I've seen the documentation about external geometry/positioning, but padding is not external geometry: https://en.bem.info/methodology/css/#external-geometry-and-positioning
My issue here is different.
What is your opinion on USING SMACSS STATE CLASSES FOR COMMON MODIFIERS as suggested in this article?
We published a new mini-library — bem-calendar. It contains a calendar based on bem-components.
It looks like this:
Try our new bem-calendar in your projects!
Hi all,
We are working on a new version of this forum and in the process a bem-textarea-editor library was created. The library has
It turned out well, so we decided to publish the library as open source. May be it will be useful for you too! :)
Try the block here.
Hello, I just started with BEM and really like it. I just have an issue with the following code and hope someone can help me out.
This is my sample code
<nav class="books">
<ul class="books__lists">
<li class="books__items"><a href="/" class="books__links">Sidebar link</a></li>
</ul>
</nav>
How I am lost to what the link should really be called? Since the li is under the block of books_lists now sure what the link class should be?!
I have a design with a lot of different link styles, so is it better to have something like link-books?
Thank you and keep up the good work. Jim.
How does BEM work with Bootstrap´s .container and .row classes? Say if I have a block called .design-news with a background image that spans the entire page and then a .container and .row under that block which would center my content, can I just keep the default classes or does it have to be .design-news__container and .design-news__row?
Which is better:
<article class="news">
<div class="news__image">image</div>
<div class="news__details">
<h1>News title</h1>
<p>News story</p>
</div>
</article>
or:
<article class="news">
<div class="news__image">image</div>
<div class="news__details">
<h1 class="news__details-title">News title</h1>
<p class="news__details-story">News story</p>
</div>
</article>
Please note: .news__details-title and .news__details-story have no real style as I already have a base style for all my H1s and P tags, so with BEM, can I just add phantom classes to make the markup look more readable? Or go with the first example? Personally I like option 2...
Hello everyone, Just started with BEM and was a bit stuck on how to use it the right way, I have the following code:
<header class="header">
<div class="header__logo">logo</div>
<div class="header__navigation">
<nav class="header__navigation main-menu">
<ul class="main-menu">
<li class="main-menu__list">
<a href="" class="main-menu__link">link</a>
</li>
<li class="main-menu__list">
<a href="" class="main-menu__link--active">link</a>
</li>
<li class="main-menu__list">
<a href="" class="main-menu__link">link</a>
</li>
</ul>
</nav>
</div>
</header>
Is this the correct use of BEM? As I understand not to nest too deep, so if I wanted to have a new block within an element you can use the mix feature?
Also I wanted to keep .main-menu reusable so I can move the main menu from the header to the sidebar if needed one day.
I hope I got it right :)
Как правильно переопределить модуль, если он не только без DOM-представления, но и вовсе сделан на "чистом" ym?
Предположим, хочу доопределить метод querystring.parse из bem-components. Пока решил так:
modules.define('querystring2', ['querystring', 'objects'], function(provide, querystring, objects) {
var querystring2 = objects.extend(null, querystring, /** @exports */ {
/**
* Дополняем станадртную ф-цию parse
* @param {string} str
* @returns {object}
*/
parse : function (str) {
// Удаляем символ '?' в начале строки
if ( typeof str === 'string' && str.indexOf('?') === 0 ) {
str = str.substr(1);
}
return querystring.parse(str);
},
});
provide(querystring2);
});
Есть ли более грамотный способ? Есть ли способ доопределить исходный модуль (декларировать под тем же именем)?
Смотрел:
(Не вижу тега ymodules. Вроде был раньше?..)
Hi all,
We have a good news — new versions of bem-core and bem-components are available!
The version is completely backward compatible, so the update should be fast and "free".
The main change is compatibility with bem-xjst 8.x. And more good news — all documentation is in English now. Details find in changelog.
The version is also completely backward compatible, so the update should be "free" too.
Release includes
link_disabledDetails find in changelog.
This version requires a mandatory update to bem-xjst 8
This version necessarily requires an update to bem-xjst 8, where new useful modes have appeared and the work of the extend mode has been fixed. Required packages for build with ENB (enb-bemxjst 8.6.7) or Gulp (gulp-bem-xjst 3.0.0) are already available for installation.
To swithch to a new version of bem-components you may need automatic migrator of templates: https://github.com/bem/bem-xjst/tree/master/migration#migration-tool-for-templates
The difference between 5.1.0 and 6.0.0 is new templates.
New releases of bem-core 4.2.0 and bem-components 6.0.0 are already integrated in [project-stub] (https://github.com/bem/project-stub/).
If you have any problems with the update — write, we will try to help.
Brief news about the BEM world since the beginning of this year:
Rolled out the BEM libraries section in a new design on bem.info:
bem-core v4. Feel free to try, revise and send us a feedback before we release a new version.
The major change is rename of uri block to uri__querystring element, which extends the basic implementation of the same name module in bem-core with Uri class. Class methods remained unchanged.Released the following major updates:
livereload. For details read the documentation and README of the project.npm-modules required for assembly.bower to supply libraries. Now all dependencies are set through npm in node_modules directory. v8.3.1 (v7.4.1)
extend() mode fixed. Now it works as expected.this.extend(o1, o2) description added.v8.4.0 (v7.6.0)
unquotedAttrs option allows us to ommit unnececary quotes of HTML attributes in some cases.v8.4.1 (v7.6.1)
extend(function(ctx, json) { … }) mode callback now have two arguments, the same as have the callbacks of other modes. The first argument is a link to context of (this) template execution. The second — link to a BEMJSON node.undefined or null and NaN will give you empty string as a result. In previous versions you get stringified results ('undefined', 'null', 'NaN').js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). The rest of the modes that are relevant only to-HTML are available in BEMHTML.replace().v8.5.2 (v7.6.4)
content { html: '<unescaped value>' }. BEM.I18N (), which returns its second argument. This is useful to copy the code from production to a sandbox. "dependencies": { "bem-xjst": "8.5.2" }. However, we continue to actively support the both branches: 7.x and 8.x.All changes are described in releas notes v8.5.2 and v7.6.4 and in a CHANGELOG.
Released bem-tools 2.0.0 with updated bem-tools-create. Detailed description is in README.
Wrote a full and clear README.
Hi there.. i'm just beginning with BEM and love the concept but struggling a bit around with nested blocks. I want to build some kind of responsive teaser with a few elements inside.
This is what my html looks like:
<div class="teaser">
<div class="teaser__background">
<picture></picture>
</div>
<div class="teaser__featured-product"></div>
<div class="teaser-content"> <!-- what about this correct naming and its children-elements? -->
<div class="teaser-titles"> <!--same question here -->
<p class="teaser-title__overline"></p>
<h1 class="teaser-title__headline"></h1>
<h2 class="teaser-title__subline"></h2>
</div>
<div class="teaser-content__text">
<p>Lorem ipsum..</p>
</div>
<div class="teaser-content__legal">
<p>1) Some terms...</p>
</div>
<div class="teaser-content__manufacturer-logo"></div>
</div>
<div class="teaser__ribbon"></div>
</div>
Inside of teaser I want to keep my content together in one block teaser-content for better positioning. So what would be the correct naming for the teaser-content-wrapper and then the following child-element teaser-titles?
I thought about a bit different version for example:
<div class="teaser-content">
<!-- <div class="teaser-titles"> --> <!-- maybe we don't need it? -->
<p class="teaser__title teaser__title--overline"></p>
<h1 class="teaser__title teaser__title--headline"></h1>
<h2 class="teaser__title teaser__title--subline"></h2>
<!-- </div> -->
But questions are still the same. Hope really you can help me because this drives me crazy.
Greetings from the rainy Hamburg (Germany)
the posts in this forum? i want to post a question but can't find any description on how about to format my html code for better readability.
EN, RU, UK Я подумал : "Чем, интересно в Яндексе UK english отличается от US ?" и нажал. Получил украинский 0_о. Украинский это UA.
Не уверен, но вероятно в UK/US english все таки надо поставить определенный артикль the перед словом domain в фразе в футере: Jadwiga and Jacek Duniec thank you for domain! У нас конкретный домен вот этого сайта. Он есть, он один и о нем мы пишем благодарность.
Совсем не уверен но если у Яцека фамилия пишется Duniec и он не из UK и не из US и даже не из UA а скорее всего из восточной европы, то U читается как У. [Дунец ?]. Яб спросил самого Яцека.
AFAIK, somewhere I have seen proof of the following things. Please confirm or disprove.
1) As DOM-tree and BEM-tree aren't required be the same, it's possible that the BEM-element is physically located outside its BEM-block in DOM and it is valid.
<div class="block">
…
</div>
<div class="block__element"> … </div>
2) For the same reason the elements of one block can be nested in another block, making intersection in the DOM-tree like:
.block1
.block2
.block1__el
.block2__el
or even like this:
.block1
.block2
.block1__el
.block2__el
Hi, This is probably very basic question but I'm not sure I saw something about that.
How is best way to move from website design into BEM structure?
I mean, how to fast identify all blocks, find what names should be and build structure efficiently?
Thanks.
Hello!
I'm newbie in BEM and trying to use it in my workflow but I'm not sure how solve that problem.
I would like to create simple layout and position all elements i.e. something like this:
<div class="main-window">
<div class="gallery">
<!-- Here is gallery content -->
</div>
<div class="story">
<!-- Here is story content -->
</div>
</div>
Should I style .gallery and .story with position and dimension properties or maybe should I nest them in .main-window elements. Something like that:
<div class="main-window">
<div class="main-window__gallery-wrapper>
<div class="gallery">
<!-- Here is gallery content -->
</div>
</div>
<div class="main-window__story-wrapper>
<div class="gallery">
<!-- Here is story content -->
</div>
</div></div>
Now I can separate .gallery and .story styling from their position because I can define size and position with .main-window elements
.main-window__gallery-wrapper {
width: 500px;
margin: 0 auto;
}
.gallery {
/* formatting without size and position */
}
.main-window__story-wrapper {
width: 500px;
margin: 30px auto;
}
.story {
/* formatting without size and position */
}
Sorry for (probably) such a simple question but I didn't find answer for that.
Thanks.
Hello!
We have made ASP.NET MVC project-stub that will show you how to solve typical tasks using BEM-related tools.
There is the detail description how everything is working in the readme file (in Russian). You may see the source code as well as run demo-project on your PC to try it.
Tomorrow I will show this stuff at the Yandex Subbotnik.
Hi, I'm creating simple input with icon. I have common block for all inputs, named 'input' that is setting padding alongside of another styles, like color, border, etc. For input with icon, I’ve created another block named ‘input-icon’. In order to create space for the icon, I must override left padding in the input when used in ‘input-icon’ block. To do this, I’ve created input modifier ‘input—with-icon’. But now I have tied blocks where if someone uses ‘input-icon’, he must remember to also put ‘input—with-icon’ modifier on the input. Is there any better way? Thanks.
<div class="input-icon">
<span class="input-icon__icon">X</span>
<input class="input-icon__input input input--with-icon">
</div>
.input {
padding: 7px 7px;
/*..*/
}
.input--with-icon {
padding-left: 30px;
}
.input-icon {
position: relative;
}
.input-icon__icon {
position: absolute;
z-index: 1;
left: 7px;
/* .. */
}
Hello, I'm new to BEM and I want to get opinion on something, so lets say I have blog post, in blog post we have title, badge, summary, figure ... below is the example of my html
<div class="post">
<h1 class="post__title">This is title</h1>
<summary class="post__summary">
Some text here
</summary>
<figure class="post__figure figure">
<img class="figure__image" src="">
<figcaption class="figure__caption">Some text</div>
</figure>
</div>
So should I do .post_figure and then inside .post__figure__image and .post__figure__caption or should i create new block like in example?
Sometimes people write "BEM", sometimes "BEM 101". It's obvious what "BEM" comes from. But what is the source of "101" in the name..? I am so curious :)
Hi there,
I have a navigation list, each items will need unique styling such as an icon/image applied to it. I've seen this handled a couple of different ways so I thought I'd put it to the forum and gets peoples thoughts on it. The standard mark-up would be something like this:
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__item"><a href="#" class="site-nav__link">Schools</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Users</a></li>
</ul>
</nav>
Originally I thought I'd use a modifier and add classes like site-nav__item--users for example. But quite a few sites I've looked at use an element instead, so site-nav__users. So in full...
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__item site-nav__schools"><a href="#" class="site-nav__link">Schools</a></li>
<li class="site-nav__item site-nav__users"><a href="#" class="site-nav__link">Users</a></li>
</ul>
</nav>
What's the thinking behind this and is there a right/wrong answer? Thanks in advance!
Hi everybody,
Briefly about the main events in the BEM world over the last 4 months with the beginning of the year.
Libraries news
4.0.0-rc.1. The main changes concerned the improvement of i-bem.js. If you are ready — you can check this release on your projects. The stable version will be released soon. Don't forget to tell us about all the detected bugs.bem-components 3.0.0 that works with bem-core 3.0.1. Despite the fact that the release is major, update should be painless.bem-history 3.2.0. The main change is a support for bem-core 3.x in bower.json. And, of course, a few bug fixes included.bem-incubtaror in bem-contrib. New name much better reflects the organization's mission. If you use (or develop) any packages, you should update the paths to the repository (some time github supports redirects automatically). You can use the user manual.Technology news
bem-xjst. The latest version is 6.5.1 Key changes:Read more about all the changes in the release notes, which are written in detail to each release: https://github.com/bem/bem-xjst/releases.
Tools
Released ENB 1.3
Worked on the plugins for the ENB:
enb-bemxjst 6.5.0enb-bem-examples 1.0.2enb-stylus 2.3.3enb-bh 1.2.0enb-bem-techs 2.2.1enb-bem-i18n 1.1.1Site news
Events (only in Russian)
bem-xjstInteresting on the forum (in Russian)
Thank's and stay BEM'ed!
A week ago I took part in the hackathon in Yandex. It was a small and local(for Yandex) one, only for yandexoids and friends. It was a very technical hackathon about tools for developers like loaders, builders, template engines. So developers were doing something for themselves.
So how did I get there if I'm not a yandexoid - my college Anton invited me because we were doing stuff related to Yandex on my current job. It's an interesting project - I'll say a few words about it later - but I couldn't find time for it because of other duties. So this hackathon became a great opportunity to find time and complete the project.
A few words about our project. BEMXJST is a declarative template engine, very flexible and powerful. So you can describe some structures using logic and domain-specific functions. Also, there is another engine BEMHTML that takes BEMXJST-templates and BEMJSON(simply a subset of JSON) and after some magic we get HTML. So on my current job we have a library of UI components that uses BEMXJST and BEMHTML. We also have a library based on React renderer. The libraries have to be equal in functionality and appearance - so there has to be no difference for users. The main idea is somehow to tell React-lib to use BEMXJST-templates in its render function. This will give us the ability to develop markup in one place and not to copy-paste it. It's possible to implement another engine that works like BEMHTML but outputs data structures fittable for creating virtual-DOM. That's how the React render function works - it doesn't produce a real DOM but a structure that describes DOM so it can compare it with the real one and then decide is it required to update the real DOM. That's why we called our engine VIDOM.
Before the hackathon, we checked the idea and created some POC and I can say that it was almost ready and almost all the tests were green. But the code base was awful and there were bugs and we didn't check all the edge cases. So the goal for the hackathon was to complete the project and make it possible to merge into upstream.
I love hackathons because of their magic. Just imagine the Saturday morning, you want to relax and your body is tired and then you came to the place with a lot of people who are also tired but they want to work and they have the ideas and passion for doing it and it's really the thing that motivates me. So I was full of energy for the whole weekend. Also, it's a great pleasure to hang out and just work together, it's great fun definitely.
This particular hackathon was great for me because it was about tools and I'm interested in it. I like that there were no prizes or ratings or stuff like that. I believe that money or other prizes break the idea because what really matters is the pleasure of doing some stuff with friends and what you get at the end. And this is the real prize. I also felt the engineering culture that exists in Yandex and it's great.
Finally, we've done our tasks and created a pull request into the main project.
More details in russian here.
Hi all! Is there any guide or examples to write plain js for blocks?
Thanks!
Hello!
I've been using the BEM approach for front-end web development a couple of years now (and it's just great!) but only yesterday I started to try out the BEMHTML template language. So far I like it a lot!
There's a couple of things though that I can't yet wrap my head around and can't find anything about in the docs either. So I hope to have some more luck here and hopefully also help others that might be facing the same problems.
Basically I would like to know how to be able to add custom CSS for a webpage that isn't directly block related. For example declarations for webfonts, normalize/reset css code, etc. I would still like to be able to use Stylus as preprocessor and have bem-tools generate and minify this CSS together with my blocks' CSS.
The same question goes for JS. What is the correct way to add JS libraries and custom JS code, preferably maintaining the possibility to have this combined/concatenated with the block level JS?
Thanks! :)
