Talking About BUM

There are plenty of front-end naming methodologies out there that have inspired other methodologies. We have straight-up BEM ¹, the influential BEM-adjusted one by Nicolas Gallagher ², SMACSS ³, etc etc. We are literally ⁴ in a sea of front-end naming methodologies to use! What is a poor front-end developer supposed to do? Which one is the right one to use? What if the front-end developer chooses the wrong one and ruins a bajillion dollar project?! And why, oh why, did I create another BEM-like syntax to add to the myriad of other similar syntaxes?!

The answer to all but the last question (which comes later, I promise) is My BUM [awkward pause] syntax.

In essence, this methodology very closely resembles the Nicolas Gallagher BEM-y approach shared above. We essentially find ourselves with a modular Block then delve into the Elements of that Block and then happily tack on some Modifiers when needed. The biggest difference is when to use underscores, hyphens, and double-hyphens.

You’re most definitely wondering why it’s called BUM. There’s a bit of a controversy around this - the bulk of which I’m saving for my memoirs, but I can give you a quick overview. There was this huge debate on what to call it. Someone interjected and yelled something about my bum. That or he called me a lazy bum. A clever one in the group was all like, “Here, here, listen ol’ chap, BUM is perfect! Block-Underscore-Modifier. It truly does convey the difference between it and BEM as well as giving a distinct similarity to BEM. It, also, is quite colourful just like your personality!” ⁵ With that compliment, my BUM [awkward pause] syntax was born.

Let’s move on to some examples to get back on the topic and to show the wonders of this new syntax.

.block {}

.block-element {}

.block-element--modifier {}

Any time a space in a block name is needed, an underscore is used.

.block_name-element_name--modifier {}

Example Scenario:

Picture yourself on a peaceful beach, the waves crashing, and temperature absolutely perfect. Your computer sits on your lap as you finally get to work on your personal project (a developer’s dream vacay, right?!?!?!).

Example #1:

You need a button for the site that you are building. The button, being modular as it should be, is gonna need a lot of variations. Sometimes you are going to need a button for submit or a link that looks like a button. They are all going to be slightly different; for example, the submit button could be extra wide compared to the link button.

So here’s our variations:

.button {}

.button-submit {}

.button-link {}

Looking good! All button types will use the .button {} styles and then extend it to meet their own criteria. Now when we need to change the color of a button, we tack on a modifier.

.button-link--red {
  color: firebrick; /* note: 6 */
}

Example #2:

“So that makes sense. But what’s up with the underscore you mentioned?” I’m quoting you right now in a sassy voice, you know, that one voice that everyone does when talking like someone else. Well, the underscore is used to separate words in a Block, Element, or Modifier. Going with our example of buttons, let’s say a new design introduces a pink color called Spicy Pink. It’s easier to parse "spicy_pink" than it is "spicypink" for our minds ⁷. I’m drawing on usability concepts here for readability when scanning. The new CSS rule would be:

.button-link--spicy_pink {
  color: #ff1cae; /* note: 8 */
}

TADA! I reckon you got it now. We use underscores for spaces. Good job!

How was the idea to this approach of BEM born? Oh, it’s a fanciful tale full of debates, plenty of rounds of fisticuffs, and the sun on a warm summer’s day. It all began when…oh, I’m told that I don’t have much more time in this café…so skipping all the periling details, it was born from one simple word: laziness. I realized that I should make it easier for me to code. I noticed the patterns of how I used my text editor with selecting/highlighting text and I modified BEM to meet my lazy needs. As already noted and something that’s probably irritating you because I haven’t covered it yet, the main difference between BUM and other BEM-like syntaxes is the switching of underscores and hyphens.

The specifics are rather simple. It’s easier for me to select the entire name of a Block, Element, or Modifier if an underscore is being used. The two types of selecting I’m speaking of is double-clicking and highlighting words using just the keyword.

This is the fancy part where you participate. Double-click on the words below. Try to highlight the entire Block name in the two examples below. Remember, we are double-clicking here.

BUM

.block_name-element_name--modifier {}

BEM-like

.block-name__element-name--modifier {}

See this fancy animated gif.

The same behavior exists when you use the keyboard to select the words in a text editor, which is my primary method of movement in a file. I’m on OS X and when I want to select a word in my text editor, I press shift+option+[arrow keys].

The problem is apparent at this point. My selection considers underscores to be part of the word, not a separator, so in that BEM-like example it will select “name__element” which is nowhere near what I want. I want “block-name”. In my BUM [awkward pause] syntax, this is built-in! It will select “block_name”! Success! We win!

See this fancy animated gif.

The conclusion to this epic saga is to be mindful of everything you do and look for situations where you can simplify a task. There’s probably features that are blaringly obvious that are not possible with my BUM [awkward pause] syntax but it is currently working for me and I’m very happy with it. Try it out and see how you like it. Give it a real go, not one of those “I pretended to give it a go and I know I won’t like it so I’m just going to say that I don’t like it and move on with my life like how I’m going to go eat at this fancy Peruvian restaurant tonight” ⁹.

Possible contemplations ¹⁰ for you, my reader: 1) What are the features that are not possible with BUM? 2) How would you create your own front-end methodology to solve for these features? 3) Are you also super into Sass right now like me? 4) etc. etc.

¹ BEM Methodology- http://bem.info/method/

² "About HTML semantics and front-end architecture” by Nicolas Gallagher http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

³ SMACSS by Jonathan Snook - http://smacss.com/

⁴ "Figuratively literally" not "literally literally". See definition 1.1: http://www.oxforddictionaries.com/us/definition/american_english/literally

⁵ Said in an old 18th-century English gentleman’s accent.

⁶ Let’s face the truth, it’s never just red.

⁷ I don’t come up with these folks; they already exist mindblown

⁸ It’s not an insult this time, I promise. This is primarily for the English speakers where compound words aren’t a big thing. It’s different for the German speakers out there though. Can I get a “Donaudampfschiffahrtsgesellschaftskapitän” anyone, wha wha? raise the roof

⁹ Apparently you like run-on sentences.

¹⁰ Keyword here is “contemplation.” As in, don’t list them out and tell me how dumb I am. I’m a very sensitive individual and I’m crying now just at the idea of you betraying me like this.