A little meme went around CodePen the other night. A Blue Box. I’m not sure how it started, but lots of people started posting code of different ways to draw a blue box. It’s weird, it’s funny, but it’s also rather amazing there is as many ways as there are for doing something so simple.

Let us count the ways:

• You can create a <div> and style it with CSS. Immortalized here by Tim Holman.
• But CSS is old school right? You could use Sass to help you write it.
• But to be totally hip you would make a @mixin in SCSS that you could call.
• It wouldn’t have to be a <div> either, it could be a <table> (or literally any other HTML element) and it could have the styles inlined directly on the element.
• Or you could not even use HTML at all but just a pseudo element on the implied body or simply a border on the implied root.
• You could even skip CSS of any kind entirely going for spacing via HTML elements and old school attributes.
• Maybe a giant dash character?
• CSS gradients could draw a box if you have color stops with no space between them. Might as well use Sass eh?
• Don’t forget about box-shadow also.
• Certainly a drawing-specific language like SVG could do the trick.
• Or a drawing-specific language like Canvas could as well.
• Pfff, canvas? How pedestrian. How about WebGL?
• Certainly some vanilla JavaScript could handle the job.
• Might as well make that a bookmarklet.
• But why do that when you could write a jQuery plugin?
• We’re just drawing to a screen after all, the web isn’t the only place you can do that. How about an iPhone app that draws a box in Objective C?

Pretty wild hey? Surely this isn’t a comprehensive collection of methods either (different image formats, dataURI’s, etc). Are all of them good to have and know about it? Does this make it intimidating for beginners or can they safely ignore many of them and learn them in time as needed?

A Blue Box is a post from CSS-Tricks