CSSBattle

Play against others in golf with your CSS skills

#1 Product of the DayApril 04, 2019
Featured Embed
CSSBattle is an online CSS Code Golfing battleground. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.
Are You Game?
Around the web
Reviews
  • Alex Walker
    Alex WalkerHandcut pixels – snap-frozen 4 freshness
    Pros: 

    I love this idea as it encourages you to test ideas and approaches you might not ever consider in day to day frontend development.

    Cons: 

    Can you save along the way? I wasn't ready to submit, but my browser died and I lost what I'd done.

    Also, it would be nice to have a bare minimum for markup validation. Perhaps mark validating HTML entries that render fine with a green tick so competitors know the baseline. I'd think 150 characters validating beats 150 characters not validating, yeah

    Alex Walker has used this product for one day.
  • Andreas Grafen
    Andreas GrafenDesign & Code
    Pros: 

    Quite a few really great and entertaining challenges. • Solving a challenge feels awesome; finding a 'better' solution feels even better.

    Cons: 

    There is no way back once you got hooked. • Reducing the character count can get incredibly hacky. *

    * Don't get me wrong… it's super awesome to see what can be done with CSS and browser behavior. To get the best score possible one needs to ignore quality tho. :D

    Andreas Grafen has used this product for one week.
Discussion
You need to become a Contributor to join the discussion.
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
Hello World! We bring to you the first ever code-golfing battleground for CSS lovers! We won't say much, head over to https://cssbattle.dev, try to replicate any target with the smallest possible HTML/CSS and climb the leaderboards! See you on the battleground :)
Zach Reed
Zach Reed@bluetidepro · UI/UX Designer
I'm confused. Can you not see the code that the leaders submitted? Or am I missing it somewhere in the UX?
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
@bluetidepro Nope. That would take away the battle premise. But we are looking into ways to get some knowledge sharing in there. Ideas welcome.
Zach Reed
Zach Reed@bluetidepro · UI/UX Designer
@chinchang457 I think the battle premise is slightly flawed currently anyways with the weird hacks you can do to cut down on characters. It's more about figuring out weird stuff you can actually submit and still have it work than using minimal VALID css/html.
@bluetidepro I was looking for the same thing! Because I scored 94.5% and I wanted to know how to improve.
Patrick Johnson
Patrick Johnson@pmjtweets · Founder @ PreFlight
@chinchang457 @bluetidepro hacking is part of good front end development. Knowing how you can break the rules is a sign of mastery, not failure.
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
@pmjtweets well said 👏🏼
Rachit Gulati
Rachit Gulati@squiroid · FrontEnd Developer
This is crazily addictive. I loved it 🥰. It's super awesome for folks who wants to check their CSS skills 😇🌈🌈
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
@squiroid Thanks Rachit!
Max Böck
Max Böck@mxbck · Web Developer, MXB
this is surprisingly fun and shows how resilient the languages are. great idea!
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
@mxbck True! Thats the premise for golfing :)
Bevan Kay
Bevan Kay@bevankay · Bevan Kay Designs
This is great! Would love to be able to see the method used by the top 10.
kushagra gour
kushagra gourMaker@chinchang457 · A creative Human!
@bevankay Thanks! I'll leave that call to the top 10 :)