WWJNTOOHE (What Would Jesus Name This Object Oriented HTML Element)?

April 6, 2015 - By

I love CSS, and I really love OOCSS. To me being Object Oriented means two things: breaking down patterns, and using a clear easy-to-adopt naming convention.

Patterns: If you’ve used a framework like Inuit CSS you’ll be familiar with some of the abstracted patterns: a grid system, or the spacing on and around various elements. A useful pattern need only do one thing very well to be helpful.

Naming conventions can be benefitted by a system like BEM, but ideal names can be instantly understood. Think about “accordion”, “radio button”, “carousels”, “tabs” – these are all digital elements we understand, they get names from real world application. BEM takes it a step further and uses underscore and hyphens to establish an easily understood relationship on variations and child elements (ok, technically the naming convention doesn’t make a CSS methodology object oriented, but I would argue that some naming conventions are object disoriented!).

So the big question: If he were a front-end developer, would Jesus do OOCSS?! To find out we need to dig into the documentation a bit. Yes, I’m employing WWJD into coding methodology.

Think about the parables! They’re really the “front-end” of a much deeper message Jesus is conveying. Just like in websites, the front-end of a parable is usually to make the message easier to consume. I believe there are some OO principles at play in these. Let’s look at “the most important parable” (Mark 4:13): sometimes called the parable of the sower, or the parable of the soils. It’s in 3 places; let’s look at one.

“A farmer went out to sow his seed. As he was scattering the seed, some fell along the path, and the birds came and ate it up. Some fell on rocky places, where it did not have much soil. It sprang up quickly, because the soil was shallow. But when the sun came up, the plants were scorched, and they withered because they had no root. Other seed fell among thorns, which grew up and choked the plants. Still other seed fell on good soil, where it produced a crop—a hundred, sixty or thirty times what was sown. Whoever has ears, let them hear.”

Jesus relates to us first with a common object: “Soil”. When Jesus talks about the soil I can instantly relate. Let’s bridge this parable into CSS, and make this a class:

.soil {...}

And we can go a bit farther:

.soil > .soil__seed {...}

Jesus gets more specific though! Now let’s use BEM and make variations on our object.

.soil--hard, .soil--rocky, .soil--thorny, .soil--good

Jesus uses parables to make valuable lessons easier to process, understand, and remember for people. This is the key to a great naming convention too. I like class names like “.soft” better than less clear prefixes like “.pd” as they’re just so relatable, memorable and easy to remember, and rediscover.

I think Jesus would use OOCSS; parables break down patterns into simple object we can understand and relate to, and often the object will have variations and children that lend themselves nicely to naming methodologies like BEM.

Categorized in:

This post was written by ArleyM