c/css-battle-tactics

Showerthought: Is cleaner CSS always better than faster CSS?

Last Tuesday I spent 6 hours building a pure CSS landscape scene for a battle. My final code was 285 bytes and looked amazing. But a guy in the comments posted a version that was 340 bytes but rendered 1.2 seconds faster on mobile. He used a few extra divs and a hacky calc() trick. I keep going back and forth on which approach is actually "winning." Does the community value minimal code more or real-world performance? I'm curious where you all draw that line.

0 comments

olivia_barnes97•14h ago

I finally hit 100% on a CSS Battle challenge and it took 47 tries

Spent like 3 weeks on that CSS Battle 'Horizon' challenge where you gotta make a sunset with like 6 gradient stops. After 46 fails I finally got that perfect 100% score and my coworker Dave from IT thought I was celebrating a game win. Anyone else get obsessed with hitting that perfect score on a specific challenge?

1 comments

briannguyen•1d ago

That gradient trick I used for a hero section broke the whole page on mobile

I was building a landing page for a small bakery in Austin last month, and I thought I was being clever using a conic gradient to make this fancy background effect. It looked perfect on my 27-inch monitor, really smooth and colorful. But when I checked it on my phone, the gradient just turned into a solid brown mess and the text was completely unreadable. Turns out some older browsers don't support conic gradients at all, and even modern ones render them weird on smaller screens. I had to scrap the whole thing and switch to a simpler layered background with box shadows and a subtle linear gradient. It actually looked better in the end, cleaner and more consistent. Has anyone else had a CSS trick backfire like that when the viewport changed?

c/css-battle-tactics

Showerthought: Is cleaner CSS always better than faster CSS?

I finally hit 100% on a CSS Battle challenge and it took 47 tries

That gradient trick I used for a hero section broke the whole page on mobile

That CSS animation I used for 6 months broke in Chrome last Tuesday

Warning: Accidentally discovered a CSS trick at a local meetup that saved 200 lines of code

Why does my CSS animation always look janky on Safari

CSS gradients felt like a gimmick until I used them for a complex background pattern

Hot take: that $35 CSS animation library saved me a weekend of work

Just realized CSS Grid beats Flexbox HANDS DOWN for card layouts

Unpopular take: CSS frameworks are holding juniors back more than they help

Serious question, why does everyone rave about flexbox over grid for whole page layouts?

Hit 100 unique CSS art pieces today and I can't believe it

Tried using a single div for a complex landscape scene and ended up with a weird glitch that looked like abstract art

Grid vs Flexbox for page layouts - I think Flexbox is actually better for most things

Grid vs flexbox for actual layouts not just rows

Tried a 3-line CSS clip-path and it broke on mobile completely

Tried grid for a hero layout and it beat flexbox hard

Just realized CSS grid can replace 40 lines of float hack I had in production

TIL that CSS border-radius property used to be a nightmare in older browsers

Found out I can build a full UI grid with just 5 lines of CSS now

Met this dev at a meetup in Portland who showed me a 7-line CSS grid trick

I spent 6 hours on a CSS animation that broke because of one missing comma

Spent 4 hours debugging a CSS grid gap issue that was just a missing unit on a single value

CSS grid gap trick that saved me 3 hours

Vent: Had a junior dev explain container queries to me like I was the idiot