So, I know I kinda promised a short story in my last post … but I was going to retheme this site first. And, well, I ran into some atrocious patterns trying to make the theme do what I want. I just wanted to share this, because I seriously went WTAF.

Some time ago, people who write CSS (sometimes referred to as Designers or Frontend Engineers), came up with a nifty convention of naming things, called BEM. It makes the CSS easier to wrap their heads around, or something. In my case, it was in SASS and didn’t really mean much as SASS did all the heavy lifting of creating these insanely long names.

Then came the PHP. In PHP, someone (probably not the CSS author) decided that instead of writing these names a thousand times, they’d write a helper function to do it for them. I guess that makes sense. However, we now end up with absolutely no clear way on how we arrived at these long names like sidebar__title--bolder-with-twist.

Looking at the resultant code in my browser, it makes sense that the rule is for the sidebar title and makes it a little bit bolder. It makes sense because that’s the element I’m inspecting, not because of the name. But God Forbid if I want to debug it! Nowhere in the source code will I find that name… It’s generated by SASS as &--bolder-with-twist, but there’s a few of them. Looking in PHP, it’s much the same story.

How did we get here? BEM argues that “The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language” (emphasis mine), only no one is speaking the same language. CSS authors take advantage of tools to avoid speaking it, and engineers write tools to avoid speaking it. This somewhat reduces the cognitive load when we’re close to the project. However, there’s a maintenance issue: debugging.

There will be bugs, there will always be bugs. Names should help you find the bugs, or they’re 100% worthless. If you get an Invalid Argument Exception, you expect the names of the parameters, the function, the files, etc, to lead you to the offending bit of code. When you have garbage to work with, well, you can’t really work with garbage very effectively.

BEM is garbage when it isn’t used for the purpose it specifies. If the team building it isn’t speaking the same language, then failure is the only option. Even if the failure is delayed a few years.

I ended up forking it and properly naming things for my own sanity. But whatever. It’s called sidebar-title now.