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

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.

Faux-forking Bootstrap Grids

I love digging into open source frameworks and adopting bits and bobs that can make my life easier! One of my favourites of late has been the grid system out of Bootstrap. Out of the box it doesn’t do everything I want, so I made some changes. This is a work in progress, but it’s becoming the standard for the Thrillworks basic model for grids (check out advanced at the end of this post). Continue reading

Starting class names with numbers

I’m probably not the only one who learned the hard way that CSS (or JS) class names can’t start with a number. It’s just one of those things: .1-col has to be .col-1, or .one-col. Classes have to start with a letter, underscore or hyphen.

I’m not sure why I find this so fascinating to think about; but a simple workaround would be to use Roman Numerals.  Continue reading

Taming Retina CSS – Part 1

I’ve recently been making use of the Retina Display Media Queries post on CSS Tricks to upgrade some of the graphics on a site I’ve been working on. My issue is the testing. Where I work we have a handful of “Retina” devices (I don’t think I’m alone in using the Apple-coined term generally for all brands), but not a desktop screen that will allow me to test the responsive sizing of the images at various viewports by resizing my browser. Here’s the solution I’ve been using: Continue reading

SMACSS Conference

Yesterday fellow Thrillworker Ryan Bruce and I had the pleasure of attending the online SMACSS conference. Lots of nerdy CSS talk for me to get way too excited about.

I’m very much a right-brained front end dev. While this does allow me to create some crazier (and yeah, maybe impractical) stuff, it does mean I can be weak in some of the more technical approaches. That’s where tools like SMACSS are so invaluable. Continue reading

Further Defence of Scoped CSS!

It’s probably obvious where I stand on this topic: I was the author of CSS-Tricks post ‘Saving the Day with Scoped CSS‘, and I got an honourable mention in the WIRED article ‘HTML5 Offers ‘Scoped’ CSS for Precision Styling‘. I’ve done more than just author a post though, I’ve kept up the conversation in the comments, and by searching what people are saying on Twitter. I think it’s safe to say not everyone is enthusiastic as I am, and I love that.  It’s awesome to see other perspectives.

I wanted to share a few thoughts that I’ve had as a result of these conversations.  Continue reading

HTML5 Offers ‘Scoped’ CSS for Precision Styling

Link

HTML5 Offers ‘Scoped’ CSS for Precision Styling

Scoped CSS is getting a bit more coverage since my recent CSS-Tricks post, and today was featured on WIRED’s Webmonkey. The post actually gives me a shout out, and the WordPress demo I whipped up. Just me being on a lastname basis with another major publication.

http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling/

Forget CSS3, CSS4 looks amazing!

I’m trying to get more into CSS all the time. I’ve started perusing the w3.org site at times other than when I’m looking for a boredom induced coma (it’s a fantastic resource, but the writing style is hard for me to get into. I think this site is written more for devs than right-brained designer types).

Today I found this gem – about CSS variables. Continue reading