My CSS class name typo took 2 hours to find and it was just a lowercase 'c'

I was building a simple landing page for my tree service website last Tuesday night, trying to get a green button to stand out. I had this whole section styled with a class called "CtaButton" but nothing was changing no matter what I did. After checking my HTML file five times and even copying code from Stack Overflow, I realized I typed "ctaButton" in my CSS file with a lowercase 'c'. The whole project was sitting there looking broken just because of one letter case difference. Has anyone else spent way too long on something this simple? It made me feel pretty dumb but at least I learned to double check my naming.

2 comments

2 Comments

smith.jordan18d agoMost Upvoted

The lowercase 'c' thing is brutal because it's literally invisible until you finally spot it. I had a similar moment last month where my flexbox layout wasn't centering and I spent almost an hour adding and removing properties, only to realize I accidentally typed "display: flex" as "display: fex." One missing letter and the whole container just sat there like a brick. The worst part is how your brain just glosses over the mistake every time you scan the code because you're so sure you typed it right. It's like the coding equivalent of losing your keys when they're in your hand the whole time lol.

victor21918d ago

Bro I had to reread that like three times because that is actually insane. "display: fex" oh my god I would have never found that in a million years. I feel like that's even worse than the casing thing because at least 'ctaButton' vs 'CtaButton' is a legit difference you can see if you squint, but 'fex' just looks like my brain auto-corrected it to 'flex' every time. That's the kind of bug that makes me question my whole existence as a developer for a solid hour.