Working with BEM at Scale — Advice From 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 %Working with BEM at Scale — Advice From Top Developers%

by Patrick Catanzariti via SitePoint