We react to the CLOSEST Mad CSS Battle

Syntax| 00:10:06|Apr 10, 2026

Chapters8

An overview of the Mad CSS competition and the close Josh vs Cassidy matchup highlighted in the video.

A gripping breakdown of the closest Mad CSS battle between Josh and Cassidy, with real-time critique, color variables, and key lessons for next-year formats.

Summary

Syntax’s recap dives straight into one of the tightest matchups from the Mad CSS tournament: Josh vs Cassidy. The hosts praise Cassidy’s almost-perfect diff view while noting tiny color and sizing misalignments that swung the score in the final seconds. They highlight practical debugging moments—like choosing the right color variable, fixing placeholder text, and aligning button padding—to illustrate how small CSS details decide a winner. The video captures the pressure of a 15-minute, one-shot challenge, where narrating your own process becomes a teaching tool for viewers. Viewer commentary about AI autocomplete versus manual coding threads through the convo, with Josh and Cassidy reflecting on speed, accuracy, and the need for clean HTML/CSS structure. Throughout, the hosts emphasize the competitive stakes and suggest format tweaks for future events, inviting audience input on elimination rounds and additional twists. If you want a hands-on sense of CSS battle tactics, this recap is the ideal companion piece to the original battle video. The team even teases ideas for bringing Claude and more participants into the mix next year, keeping the conversation lively for developers who crave practical, in-the-trenches CSS coaching.

Key Takeaways

Locking in color variables at the end of the battle can swing scores; Cassidy’s use of dark purple vs Josh’s unfinalized color was nearly decisive.
Exact text sizing and precise padding are the difference between a solid UI and a near-miss; Cassidy and Josh repeatedly adjust margin and padding to tighten the layout.
Text area and input box interplay is trickier than it looks; treating the input as a text area container can fix alignment and readability issues.
AI autocomplete can be a double-edged sword in high-speed coding challenges, sometimes speeding progress and other times slowing it down, as discussed by the contestants and judges alike.

Who Is This For?

Essential viewing for CSS developers who enjoy live-coding challenges and want practical takeaways on color theory, layout tuning, and fast-paced problem-solving. Great for viewers curious about competition formats and how minor details influence scoring.

Notable Quotes

"The average score is 69% nice%."

—The hosts reference the overall difficulty level and performance benchmarks for the competition.

"Cassidy, what are you thinking?"

—A moment highlighting Cassidy’s real-time decision-making during the render tweaks.

"In the last 10 seconds it could have been anything like lock that color in."

—A pivotal post-mortem observation about how final color decisions influenced the final score.

"Text area is within an input box and input box is going to be how we do that."

—A concrete debugging note showing how contestants talk through structure decisions.

"The placeholder text is too far down, too far to the right, and the wrong color."

—A self-critique that underscores the precision required for small UI adjustments.

Questions This Video Answers

How did Cassidy nearly win the Mad CSS battle against Josh in 15 minutes?
What color variables and CSS properties most influenced the final score in the MAD CSS competition?
What are the pros and cons of AI autocomplete in high-speed CSS challenges?
What format changes are being considered for next year's Mad CSS tournament?

Mad CSSCSS BattleSyntaxJoshCassidyAI autocompleteEMTTCSS color variablesUI spacingcompetition format

Full Transcript

What's up everybody? We are taking a look at the closest battle of the Mad CSS tournament. If you didn't catch it, Mad CSS is our CSS battle competition. We had 16 of the best CSS developers in the world go head-to-head and we went all the way through until one person took home the entire championship. I won't spoil it for you if you haven't seen it just yet, so you can go back on the YouTube channel and watch it. But today, we're taking a look at one of the closest battles, which is Josh versus Cassidy. All right, let's take a look. Is there a span around the headline? There is. And let me scroll over. Highlight. Okay, let's see. Highlight. Text color is the var purple. Gorgeous. Okay. Um Oh, and it's not text color. It's just color. Cassidy, what are you thinking? Okay, let's do the text area cuz the text area is interesting. I think I want my text area. And actually, right. Okay, good. The up arrow is uh the character code for that. So that's helpful. How do I want to do this? The text area is within an input box and input box is going to be how we do that. Oh, Claude, I guess added some stuff here for me. Yeah. How did you guys feel about uh AI autocomplete? There were times when I thought it was being helpful and then only to like give it a second glance and see that it was not being helpful. uh because you're going for speed and I think that's one thing that gets lost on some of the viewers is just how urgently you have to work at everything. So when it does autocomplete you're glancing at it you're like that looks pretty good but then often times you end up deleting half of it and changing the other half and I I would have been faster with EMTT. I don't know if it ended up slowing me down or hurting me. I did find it to be annoying. Uh definitely. Yeah, I I feel like I got slowed down by it and in fact in many cases it actually hurt me. What is this headline? Oh, there we go. That's why freaking AI autocomplete added a bunch of garbage I didn't even know I had. EMTT with like some sort of class autocomplete from the HTML would have been much faster. And I'm like I'm very good at EMTT. So I probably would do it without AI next time. Yeah, cuz it's interesting to see Josh's output. it like AI is suggesting like six, seven lines of of code. Placeholder text color CSS cuz I don't know how to do that. One of the funny things that I I I've noticed even when she said like text color and then had to correct herself to say color like the the people who aren't competing in this don't understand just how blank your brain goes when you are doing some of this. the fact that Cass is looking up the placeholder like or the text color stuff like my gosh there are so many times when I'm thinking what is the property for that and it's something I write hundreds of times a day you know a couple people were like like chirping me online of like you can't get this and all of those people I have invited on to do a battle against me and they've all went dark cuz everyone thinks oh yeah honestly it's just placeholder but like it's so stressful when you're in the moment and like you have zero zero time to fuss around. I will say like even though she had to look it up, she was one of the quickest to find it cuz a lot of people had to look up placeholder and they're fumbling. They're asking AI like her her pool was like one Google search, boom, done and keep going. So that didn't anything. Oh, because I didn't do it right. That would Okay, cool. Okay, now I have to fix text sizing. Interestingly, there's like a slight like I'm not actually in exactly the right spot on these buttons. And Josh's background is too big and my buttons are not far enough. He didn't set the color. He He's doing that on purpose. Adjust a flex, you know? Yeah. My name is He's like a like a tiger playing with its meal before he eats it. He is so chill for sure. Even though he might say he's not, he's definitely so chill. One thing uh I would like to uh to highlight for folks is that we open this battle up for people to do this and you get one shot at 15 minutes and for anyone who thinks that they could do better. The average score is 69 nice%. So 69% is is where most people are lying when they are taking on this battle in 15 minutes. Yeah. Touching TV makes it look so easy. like I could do that, but you know, give it a try. And we have it set up so you can give it a try. So, and you have to talk while you do it, too. Yeah. I want to comment on that. Like, that's one of the things people don't realize is like every single person in this competition is a teacher, right? Like like Cassid's narration and Josh's narration. Like, you're learning as you watch them fumble and and figure out like they're they're really good at, you know, narrating themselves, which a lot of people, if we got them in the ring, they would not be able to do that. Okay. Oh, that is the correct font size. Let's go. Okay, let me do margin top. I hate doing margin top. I'm upset that I've done this and I ask for you all to forgive me. I just realized now like I've been assuming the weird colors are a like issue with the dipping tool, but no, I've just been doing it in the opposite color this whole time in terms of the background color. That's so much easier. My goodness. I have my version. The placeholder text is too far down, too far to the right, and the wrong color. So, placeholder text. Let's make it white. Also, the background color is wrong. Maybe you need to be regular gray, not dark gray. How do you guys feel about all the color variables? I thought that's how I work anyway. So, yeah. Light gray. No, dark gray. It's not it either. How many grays are there? Dark gray. Light gray. I think at at some point you were being a little tricky with the maybe having a few too many in there, but that made for good TV and like obviously we did it. Yeah, that's what I thought. Like a lot of the comments were like there's too many color variables and they're too similar. But I think that's like that's what separates the the winners from the losers like in the last few seconds like making sure you have the right colors. So yeah, that's one of the first things I would clock when I'd start a battle. What are the colors? What are they in the design? So like get that into my head so I'm not having to process it in time and then like try to validate the HTML and classes and stuff. Yeah. Is five pixels. Let's do that. And then I'm going to do margin top is zero because that makes me angry. I just made everything worse. Cassidy, why? Okay, the buttons are not all the same size. That is the key realization I'm having. So, I shouldn't be using a fixed size or even flex one. I should be sort of relying on them having their own size and tweaking the padding within. So, if I do that, it's too much. If I do 10 pixels, that looks better. It's literally just this. Your bugs delivered faster. Why is it like this? Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Cassidy. Cassidy, stop freaking out and do your job. Scoot it up. Scoot it up. Scoot it up more, please. Why are you like this? No, actually that's I don't want to do that. And there's only 8 seconds left. Oh, and Joshua back down to 93% with only 7 seconds to 96. This is a nailbiter. 4 seconds left. Okay. Yeah, I don't have. So, this was an incredibly close battle and Cassidy actually got the fourth highest score overall but didn't make it into the next round. One of the hardest parts about this is like looking at politics, you know, and like more people voted for this person but they didn't make it in, you know. It's not fair. It's not fair. It's It's not fair. And I will say that maybe perhaps we should have dropped the lowest score. No, that's not how March Madness works. You know, the most points and score in a basketball game. No, you you either win or you lose. It's not good enough to be pretty good. You got to be the best in this game. Got to be perfect. Yeah, it's true. I don't think Cassidy was pretty good. I think she was great. She was awesome. Great. She would have crushed me in this. Yeah, man. All right, let's take a look at their code. I did show so I did an analysis video and I did show that if you look at Cassid's diff view, her text was almost perfect. But again, it comes down to uh this color variable, dark purple. So sneaky. Yeah. And so if you use that uh dark purple color variable, that bumps her up. That would have been enough. It I think it would have. Yeah, they were so close that it she would have beat Scott by uh.5. Josh. Oh, so yeah, she would have beat she would have beat Josh by.5. But it's it's interesting because uh Josh also didn't lock in the color. So if he would have locked in the color, it would have been an even Yeah. So that wasn't the differentiator. But I think in the last 10 seconds it could have been anything like lock that color in. I think maybe her her her text inside was the like just a little bit off. Yeah. You see, but you bump that text up, then your text box is off. Exactly. And I think she made the right call towards the end of the battle cuz like she was bumping that around, but then her score was going down to like 60% cuz everything else would shift. What did I do on this one? 86 86.2. You also didn't set the the color and then your the inside of your your input box area here was a little off. I think you didn't set the font size or so. Yeah, that battle could have gone either way. Props to Cassidy. But we definitely want to see her again next year. Uh cuz and also maybe do like elimination rounds where you're not out in after just one battle. We we'll play around with the format next year. Yeah, we should talk about that. We'll talk about that in our recap video of like what types of things that you all would like to see cuz I have so many ideas for uh how this format could be improved. Let us know in the comments cuz I would love to see. And also I think we need like a like a couple like random ones as well. We need a plan. Definitely need to hook claude up to this thing as well. See how well that does. Um, a couple people with mouths running Gstack. Stack Gary in here. Oh, Gstack, not Dan Stack. Yeah.