BEM: how to keep your layout in order

Creating a beautiful and user-friendly website design is half the battle. After you have received your layout, approved all fonts, colors, animations and micro-interactions, it needs to be properly designed. In Irwas, we aspire not only to create a good product but also to keep our code clear and easily manageable. 

Layout is a kind of “translation” of a design layout into a computer language so that the developed visual interface becomes functional. Front-end programmers are engaged in layout. Having received a design layout, they divide it into separate images, set the structure of the page and write scripts for interface interaction with users. The result is a document where all the key parameters of the site interface are prescribed – the location of its elements, scenarios for using buttons, animation.

It is the layout that determines what the site will eventually look like. If the developer messes up, the resource will look completely different from what it was intended. The layout also affects the download speed — for example, a competent developer will choose the optimal sizes for pictures and videos, and will not pile kilometers of code on top of each other.

Signs of a good layout

• The site adapts perfectly to the resolution of any (almost) device;
• Images and videos are set in the optimal size, which does not cause the site to “freeze”;
• Lazy load is used where necessary — site elements are loaded only when the user directly interacts with them. This allows you to load pages faster.

In other words, a good layout is an inconspicuous layout. If the user does not experience any inconvenience while on the site, he does not have any questions or irritation about certain interaction scenarios — it means that the layout designer has done a decent job.

The history of layout development

Initially, when all the sites were more or less similar, and the design was simple (we can even say that there was no design at all as such), the same layout principles were used everywhere. But with the development of technology, there are opportunities to use non-standard visual techniques. This was influenced by the appearance in 1994 of the Netscape browser, which supported more sophisticated technologies to make the site unique and stand out. The concept of web design began to develop, which means that new layout rules were required.

At the end of the 1990s, the number of popular browsers began to grow, we had to develop sites so that they were displayed correctly in any browser. At the same time, the profession of a layout designer appears. If earlier the same specialists both “drew” the site and wrote the code, now it became more and more difficult to combine these two specifications. The principles of layout also changed and became more complicated.

Table layout

This principle appeared when there was a need to “customize” sites for different browsers and devices — that is, back in the 1990s. The tabular method consisted of standard cells, each of which contained content. It was possible to set certain sizes of the table itself, and columns and rows were adjusted to different screen resolutions. Of course, this method was still far from ideal, but it already allowed the site to be displayed more or less correctly on any device. It is worth noting that there were no mobile devices in those days, so we are talking about several standard display resolutions. Now the tabular layout is no longer used.

Disadvantages of the tabular method:

• The inability to adapt for mobile devices.
• High complexity of modification and modification.
• If the table is large, then the site loading speed may be low. And the site itself is shown in full only when the entire table is loaded.
• To place an element in the center, it is necessary to leave several empty cells to the left and right of it — this significantly weighs the code.
• If there is more code in the layout than text content, this also negatively affects the search results.

Layout in layers

The method became widespread during the development of the Netscape browser — it was also developed by this company. This method has become a significant step forward. Now the content of the site could be laid out in “layers”, turning their visibility on and off, setting parameters and determining the position on the page. The method made it possible to create dynamic content and significantly simplify the code. The layer parameters are already set not by physical dimensions, but by applying styles that allow you to set the width and height of the block, its appearance, etc.

Disadvantages of the layered method:

• Requires a very highly qualified layout designer;
• Sites created by this method are not always displayed in the same way in different browsers.

Layout in blocks

Layout in layers was not very widespread, but it became the basis for the development of a new method — layout in blocks. This principle made it possible to create a clear hierarchy of the web page – to determine where the main, secondary and service elements will be located. The main structural element here are rectangle blocks, which, in turn, can be divided into other rectangles.

The block method gives the layout designer much-needed flexibility in presenting information. For example, you can arrange all the contents of a page in one block, you can make separate blocks for each screen, or you can create your own containers for design elements, text content, etc.

Disadvantages of block layout:

As in the layered layout, there remains the problem of unequal display of the site in different browsers.

Frame layout

With this method, the layout takes place using separate elements — frames, each of which is essentially a separate web page. Frames work independently of each other, so even if parts of the code are repeated in different frames, there will be no confusion. This means that frames allow you to create pages with complex design and interactions. Frames require less code than blocks or tables, so they are easier to load. With this layout, the page information is divided into parts: one contains content, and the other contains navigation elements.

Frames allow you to create the lightest possible sites, but this approach has its drawbacks:

Frames are the worst indexed by search engines, because due to the layout features, not all pages have navigation;

Internal pages don’t have a separate URL, so the user can’t bookmark them.;

Compatibility with various browsers is seriously affected.

Currently, the block layout method is most often used — but, of course, it has undergone significant changes since its invention.

Basic approaches to layout

One of the main principles of layout is a unified and optimized display of the site on any device and in any browser. For quite a long time, almost no attention was paid to this, the layout was fixed. That is, on wide screens, white fields were formed at the edges of the layout, and on the mobile screen the site was displayed simply as a reduced copy of the desktop version.

Currently, several approaches are used to correctly display the site on different devices.

Rubber layout

In this approach, the page width is set as a percentage of the screen size. For example, we can specify that with a screen width of 1080 px, the width of the blocks will be 50% of the main size.

The disadvantage of this approach is that it is not always possible to maintain the usability of the site by significantly stretching or reducing the blocks. In addition, it is difficult to create a high—quality rubber layout – it is necessary to calculate very precisely what sizes certain elements of the site will have, and set each element its own parameter so that in general everything looks good on any device.

Adaptive layout

With this approach, the layout adapts to multiple screen resolutions. This is usually done for 4 main resolutions, which vary in width:

Wide screen: from 1920 px;

Laptop screen: 1280-1919 px;

Tablet screen: 768-1279 px;

Smartphone screen: 320-767 px.

With adaptive layout, elements can change not only the size, but also the position relative to each other. For example, on the smartphone screen, horizontally placed blocks can become vertical. It is even easier to make such a layout than a rubber one, but it is more time—consuming – the code turns out to be more voluminous, since all the parameters for different pages fit in one document. At the same time, all the elements themselves remain unchanged. Usability may suffer as a result. To prevent this from happening, it is necessary to ensure that all elements look equally good on any screen, and this is not always possible.

Responsive layout

This approach implies a hybrid between rubber and adaptive layout. With it, the site content dynamically adapts to the screen resolution. For example, some blocks can simply change the size as a percentage — as in the rubber layout, while others will adjust to the screen resolution — as in the adaptive approach.

Now responsive layout is used most often.

Creating a mobile version

This approach involves creating separate versions of the layout for each popular resolution — for example, for desktop, tablet and smartphone. This approach is good because it allows you to make any version of the site as user-friendly as possible. For example, in the mobile version, not only the size of the content may change, but also the appearance of the menu, the principles of interaction with blocks, and even the composition of pages.

Of course, this approach is the most complex and expensive, but it allows you to provide users with the most user—friendly interface, as well as configure advertising more efficiently – for example, drive traffic from social networks directly to the mobile version.

What is BEM

BEM is a modern layout method, which stands for “block element modifier”. BEM allows you to follow uniform layout rules that help you quickly develop interfaces, flexibly configure them and easily modify them.

BEM was developed at Yandex. With the development of the company, there was a need to create a large number of online products. And since each developer worked according to their own rules at that time, it was difficult to ensure fast teamwork. Then it was decided to create a single layout method. These are the principles that formed the basis of BEM:

The code should be simple and understandable not only for the author, but also for other specialists, so that they can refine it if necessary.

Duplicate code blocks must be stored in a single database.

Each element should have its own name, which is clear to everyone in the team.

The layout structure and rules are the same on all projects.

So, according to the BEM principle, the entire layout is divided into:

Blocks. These are functionally independent page components that have their own style, size, behavior, etc. Examples of blocks are the search string, footer, header, etc. Blocks can be simple and composite. Thus, the entire layout is assembled from such components.

Element. This is a part of the block that is not used separately from it. For example, the elements of the search string can be the actual string, icons, content.

Modifier. This is a property of a block or element that is responsible for changing its behavior or appearance. For example, a modifier can change the color of the search string if the value is set incorrectly. A block or element can have multiple modifiers.

Each modifier is assigned a name that allows you to determine its belonging to a specific element or block. By the name of the element, it should also be clear to which block it belongs.

Pros of BEM:

The main advantage is uniformity. It is immediately clear which blocks the page consists of, which elements are present in each block, and which modifiers are applied in them.

BEM provides development flexibility. By applying modifiers to elements, you can flexibly adjust the adaptation to different screen resolutions.

It is convenient to work as a team — blocks do not depend on each other, so developers will not interfere with each other when working on the same interface.

It’s easy to optimize the site — instead of going into the code and looking for a place to rewrite, you can replace a separate block. And while it is being edited, the layout will not fall apart.

Cons of BEM:

Long names of modifiers or elements may seem difficult for developers who have not encountered BEM.

Any, even small, components of the site are made up only in blocks. This can be inconvenient for layout, for example, small buttons, dropdowns, subtaytles, etc.

In principle, the disadvantages of BEM are insignificant compared to the convenience that this method carries.

Are there alternatives to BEM?

The two main alternatives to BEM are SMACSS and ECSS.

The SMACSS methodology assumes the use of rules for individual CSS categories: basic rules, categories for styles, categories for appearance, etc. And the layout itself is performed using modules to which these rules apply. Unlike BEM, the SMACSS method does not assume rigid naming of elements. On the one hand, this reduces the amount of code, but on the other hand, it negatively affects its uniformity.

ECSS offers to assemble a layout from unique components. A duplicate of one component, even if it has even the most minor differences, should be made up as a new component. Also, this method pays great attention to uniform naming. Due to the large number of components, the code becomes heavier, but removing one of them does not affect the code in any way, because all components are independent.

These alternatives are similar to BEM, as they strive for code uniformity, but BEM seems to combine their features — strictness to naming, but flexibility in creating components.

Instead of a conclusion

Of course, BEM cannot be considered a completely ideal solution for the layout of any interface. But this method greatly simplifies the creation of complex, highly loaded interfaces that several specialists are working on.

The use of BEM allows you to perform layout much faster and easily change the source code, if necessary.