The naming fallacy and BEM

I’m going to coin a new term. A named thing to add to the age old debate about naming things. You’ve heard Phil Karlton’s much used and misused adage. That one. Here yet again: “There are only two hard things in Computer Science: cache invalidation and naming things.” May I present for your consideration:

The ‘naming fallacy’: the fallacy that your newfangled solution solves the naming problem.

So, before we talk about anything. I’ll lay out my cards. I’m a programmer. I’ve been attempting to name program-y things for about ten years.

I’m going to pick on BEM, for the sole reason that someone at work decided it would be good to use. It may be great. It may even be the best possible solution to all your CSS problems. But maybe, just maybe, it’s not.

So what’s BEM? It’s a set of conventions for naming all things CSS. In the most reduced terms it says that things that we are naming can be categorised into blocks, elements, and modifiers. Blocks are things, elements are parts of things, and modifiers change a block or element. We should write the name in the format:

block-name__element-name–modifier-name

Some definitions use single underscore (_) rather than double dash (–) to separate modifiers. Each part is optional depending on context and reuse. Going to reuse that element, then drop the block. Modifier can modify different things, then drop the element. There is more complexity and finer details here to deal with more minor use cases but that’s the general idea.

So what’s wrong with it? Well, first off, it’s yet another CSS naming and structuring convention - we’ve had OOCSS, SMACSS, SUITCSS, and Atomic. Not to mention tooling that has it’s own preferred naming conventions and opinionated viewpoints - SASS, LESS, and Stylus. So, without even going into the merits, what are the statistical chances that this one got it right? Then there are the lessons of history. Hungarian notation… we just don’t do that any more.

I’m sure the creators of BEM would argue until they are blue in the face that this is entirely dissimilar. But, it is effectively adding a namespace to the start of a name.

Finally, BEM has not been received with overwhelming joy everywhere. Maybe it just doesn’t work with teams that aren’t all on the same page, that are too big, that aren’t savvy enough. Maybe it does more harm than good to those teams if they fail. Maybe the problem is not with BEM or any of the other options. Maybe the problem is with CSS itself.

It’s not fit for purpose in a world where it is the styling, the layout, nay the look and feel of the internet. But then again, maybe in a world where naming things is something we constantly think we have solved - maybe BEM is not what we want, but what we deserve. Ladies and gentlemen, another example of the ‘naming fallacy’.