Working with BEM at Scale — Advice From Top Developers

HTML & CSS
1

Originally published at: http://www.sitepoint.com/working-bem-scale-advice-top-developers/

At the start of the year, I put together an article on BEM and SMACSS that focused on the confusion of choosing a CSS methodology. I contacted a range of different developers and got their words of advice, their success stories and their horror stories in the hope that others could learn from their experiences with these popular CSS methodologies.

The article was quite well received, but there was a recurring question I’d seen over and over again with BEM that the article didn’t cover clearly: How do you deal with BEM at scale?

It was all well and good to say BEM is beneficial (it is!), but often the guides on the web for BEM stick to the basics. They tell you to arrange things into block__element--modifier but there isn’t a lot of guidance on what to do when things get messy. Is block__element__subelement--modifier okay? Is there a best practice for arranging your CSS files? Should you use @extend to inherit parent class values or should you list those in your HTML?

In this article, I wanted to get the thoughts of developers who’ve had experience working with BEM at scale already — what do they do? What lessons have they learned in the process that would be good for us to know beforehand?

One thing you’ll find is there are some differing opinions — but that’s okay. I’ve tried to include as many of the responses as possible, even if they include contradictory views, so that readers can make up their own minds.

Some Background

BEM originated at Yandex, a Russian search engine. It has since evolved into two different streams of use — it can be either the whole BEM stack that Yandex created (CSS, JS, HTML templating and development tools) or it can be solely the CSS methodology behind it.

The latter approach has evolved from the Yandex concept via ideas by Nicolas Gallagher, Harry Roberts, and many others. The team at CSS-Tricks did a great write up on the CSS BEM methodology recently too — worth checking out!

This article will cover a bit of both worlds as I thought it was best to include both perspectives. However, quite a large proportion of the respondents focus solely on the CSS methodology rather than the Yandex BEM stack.

The talented developers that let me into their minds

I’ll start by introducing the developers who were kind enough to let me into their minds to get some tips and advice on using BEM at scale. I was lucky enough to find BEM enthusiasts from all over the world — I’ve got responses from the Netherlands, Sweden, UK, Crimea, and Estonia! A very big thank you to all of them for taking the time to answer my questions.

  • Bob Donderwinkel, a front-end developer from Rotterdam – Website, Twitter
  • Hamish Taplin, a front-end developer from Cardiff – Website, Twitter
  • Harry Roberts, a Consultant Front-end Architect, designer, developer and absolute BEM guru from the UK – Website, Twitter
  • Serge Herkül, a developer at Teamweek – Website, Twitter
  • Vladimir Grinenko, the head of the BEM development group at Yandex – Website, Twitter
  • Vladimir Starkov, a front-end developer from Sweden who is one of the founders of getbem.com and previously also worked at Yandex – Website, Twitter

Let’s get started looking at the advice from these developers!

Continue reading this article on SitePoint
1 Like
2

This is a great article, I was theming like a boss yesterday and ran into this exact conundrum with double-nested blocks.

We use the Bootstrap grid for our apps, but only through semantic classes - so no .container, . row. col-xxx - and I find the requirement of always starting with a container for full width blocks (if they have bgcolor) commonly creates naming and nesting issues. I end up with the block starting too soon - on container and the row element hanging around without a good__name.

I know Foundation doesn’t need that extra div, but the path has already been taken.

Thanks for the article, it’s great to see concrete examples with decent complexity.

1 Like
3

Thanks for the BEM write up. Over at Omada Health, we have been using BEM for about a year. It took some time for people to understand and jump aboard, but now they realize the importance of it. We can reduce specificity and have less of a chance to conflicting with other classes. It has been great to work with BEM and also helps you to think about what you are trying to do with your CSS. With a simple architecture pattern and BEM, it can make the code base much more concise, and easier to scale and maintain.

4

At first I was sceptical against BEM. I’ve always used my own structure, but after a few hours testing I found a lot of benefits. Right now I’m using the “module approach”, but I got really interested in the “components/objects approach” reading this article. Thanks!

5

Thank you for the kind words everyone! I’m quite glad that the article is helping people get their head around the more challenging areas of BEM :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.