Who needs sleep when you've got... code golf.

In code golf, you try to achieve a given outcome in as few characters as possible. In the same spirit, CSSBattle was created by Kushagra Gour and Kushagra Agarwal for players to compete in ranked matches. The goal is to replicate an image and you are free to achieve it using HTML or CSS. Vector graphics (like SVG) and images are not permitted. There is also a silent agreement amongst ranked players to not spoil the game for others by sharing their solutions too early.

I did not 'get' the appeal of code golfing immediately as one could easily achieve the same outcome using an SVG image. Like many, I felt that it could foster poor code practices - which was possible if you're new to the language, while others viewed it as an extreme optimization challenge or even a history lesson (ie. learning about depreciated HTML).

But I gave it another go and was hooked, thanks to CSSBattle's Tips & Tricks page and Ilya Streltsyn's attempts for the first challenge. It showed me the many ways coders have been working the system through constant experimentation and true expertise. Players like Ilya know CSS and HTML inside out.

How obsessed was I, you ask? I challenged a total of 11 targets, spending almost 20 hours over three days and broke into the Top 30 for half of them. On one of the newer challenges, I made rank 19 (as of 2 Sep 2020) but could not get any further.

Was it beneficial? It was, to me at least. I've learnt a whole lot about CSS golf even if most of the strategies would have been impractical in production usage. I can now create single <div> graphics, it's not the most practical but it is cool. I am also more confident in my ability to write CSS gradients from scratch.

By Suling, 2020

This is a living document.