BEM is a frontend methodology from Yandex. You can find a lot of information about it on the web. Many companies are implementing it in their projects, and we are no exception. I will tell you how we use BEM in this article.
The idea is to add a “Container” concept. “Container” is a storage for the blocks. It may be no connection between container and block.In other words, block doesn’t know in which container we put it, we can move blocks from one container to another.
Let’s grab some piece of PSD template and create structure for it:
We won’t code page markup, focus on this section.
First of all we need to create tags. We see unordered list here:
li is a container, we will paste block into it. Let’s go ahead and write structure for the block:
Next rule - every tag should have class(except CMS-content, we will style it via tags). Add classes to your structure:
Note, container(li) has abstract class ‘gl_item’, we can put different blocks into it in the future(another articles, news, images). Container is used for grid in this case(floats, inline-blocks, flexbox, no matter). Block - “action_block”. You can paste it to another container. It has elements - image, title, text and link. Note, the image has a wrapper, that fact protects you from different problems. Original BEM has long и boring class names, which are confusing. We use ‘_’ to separate words in classes.
Now we know about container, block, element. Let’s talk about modifiers. Imagine that our blocks have different image alignment:
Images will be aligned by text-align css property of the wrapper.
Styles for our structure:
Bootstrap is a css framework developed by Twitter. It’s awesome tool for quickly site prototyping. Also you can use it for frontend of admin panels without definite design. But this framework is unsuitable for original design sites. You can read more about it in the Bootstrap: an intervention article.
Use 1 main class for tag, other classes are modifiers
Don’t use presentation class names(“color_red”,”left”,”fz34”)
Don’t use long boring and unclear class names(“actions_list_item_block_link_bottom”,”a_l_i_link”)
Use preprocessor abilities(@extend,@include and others) for repeating css-properties instead of additional classes