Spent 30 minutes debugging a typo in my CSS class name yesterday

Was working on a simple landing page and the button just wouldn't style right no matter what I tried. Finally realized I'd written 'btn-primary' instead of 'btn-primary' which is just a missing letter but Chrome didn't care. Has anyone else spent way too long hunting down something that dumb?

3 comments

3 Comments

laura_schmidt821mo ago

Wait you wrote the same class name twice and it still broke? That's brutal. I once spent 45 minutes on a dropdown menu that just refused to open, only to realize I'd named the div 'dropdown-conent' instead of 'dropdown-content'. My brain just skipped over the missing 't' every single time I looked at it. Did you at least feel like a genius when you finally spotted it?

violaramirez1mo ago

My record was spending 2 hours on a button that wouldn't change color on hover. Turns out I put a semicolon after the hover selector instead of a colon. Like my brain just saw "hover" and decided that was good enough. Felt like the biggest idiot and also the smartest person alive when I finally caught it.

emma_flores1mo ago

Did you ever find yourself doing the "double take" thing where you look at the exact same line twenty times but your brain just refuses to process it? (I swear my eyes just glaze over after a while). What worked for me was literally changing the font size in my editor to something obnoxiously huge, like 24pt, so each character stood out way more. It felt stupid at first but it forced my brain to actually read each token instead of just skimming the structure. Also, I started reading my code out loud (yes, in an empty room) and that caught so many silly typos because your ear catches what your eye skips. Maybe worth a shot next time you're staring at something that should work but just... doesn't.