BEM - Methodology to enable reuse in front-end development - Interview with Sergey Berezhnoy
Developing large scale applications requires a certain amount of discipline. Sometimes it is enforced by the environment; sometimes you have to apply it yourself through conventions. Likely both are needed to some extent. As applications grow in complexity, the need for clear architecture grows unless you want to end up with a big ball of mud↗ or a similar disaster.
To learn more about the topic, I am interviewing Sergey Berezhnoy↗, one of the authors of BEM↗.
Can you tell a bit about yourself?
#
I am a web developer in Yandex↗ since 2005, and I participate in the development of such Yandex services like Search, Mail, Blog Search, Yandex blogging platform, Video and Images searches. Along with service development created internal tools for web development. I am one of the co-authors of BEM.
How would you describe BEM to someone who has never heard of it?
#
BEM is an architecture pattern allowing to achieve flexible and maintainable code. It’s a way to make your code self-descriptive and predictable keeping everything consistent and familiar to all the developers on a project.
And all you need to achieve this for literally any interface is just a few concepts:
- Blocks↗ to split an interface into components
- Elements↗ to split complex blocks into parts
- Modifiers↗ to express state
- Mixes↗ to have different blocks or elements on the same DOM node
- Redefinition levels↗ to build a project layer by layer avoiding copy/paste.
How does BEM work?
#
The idea behind BEM is similar to Web Components or any other component approach to web development.
Grasping sizeable complex system at once is hard. Developers may split it into simple reusable blocks which are easy to use and maintain. And then they can be used as Lego bricks to build anything.
BEM provides best practices for that as well as ready-made tools↗ and block libraries↗.
How does BEM differ from the other solutions?
#
First, BEM is just a concept (similar to OOP).
The main power of BEM is that it works for any tech (HTML, CSS, JS, tests, documentation, etc.) and everything can be described with just a few simple concepts.
BEM can be implemented in many different ways on any programming language.
Of course, we have our own↗, and as we love JavaScript, it’s JS based.
Why did you develop BEM?
#
Initially, we faced a few problems:
- Avoiding copy/paste on different projects with the same design style guide
- Keeping large projects maintainable
- Having unified structure on different projects to make it familiar to developers
So BEM was started to solve these problems but eventually became much more powerful.
For all the steps of BEM evolution see The history of BEM↗.
What next?
#
I’ll continue to popularize BEM methodology and develop examples of implementations in different techs. Here’s one of them for React:
There’s also a video↗ from FullStackConf where we talked about all the features of BEM.
Everything about interaction design in large teams is also important for me. As the department of search interfaces development continues to grow, we want to get benefits from the fact that so many cool people gathered in one place. It’s a pity though such insights are hard to open source.
What does the future look like for BEM and web development in general? Can you see any particular trends?
#
I’m sure that the component approach will continue to evolve. For example, nowadays in React the same ideas we used in our code several years ago are implemented. I hope that other concepts of the BEM methodology will be more widely known because ultimately it will make it easier to do web interfaces and it is beneficial to all of us as users.
What advice would you give to programmers getting into web development?
#
Be always open to learning something new. On the other hand, do not reinvent the wheel but improve it — do not hurry to create your solution, take your time to find existing once and improve.
Conclusion
#
Thanks for the interview Sergey! Conventions have power!
To learn more about BEM, visit bem.info↗.