Pasta's Corner

Data Point: ChatGPT vs. StackOverflow vs. Reddit in helping a guy with a tricky web development problem

Published on 2025-11-23

Some Background

With LLM's being widely used in the world of coding, some coders have declared that StackOverflow is dying. Why have a seemingly legitimate question marked as "duplicate" by moderators instead of asking an LLM that's designed to respond to you no matter how dumb or over-answered a question may be and expecting a generally usable answer? And even if you don't trust LLMs, there's always Reddit and Discord communities which tend to be far more lenient, right?

However, I still have some faith in StackOverflow. I have had a history of asking a few questions on that site and getting some quality answers. Plus, StackOverflow is better oriented towards developers compared to the average subreddit or Discord chat, while also having higher quality answers. However, this recent experience will have me reconsider where I should ask a question first.

The Problem

I wanted to get rid of unnecessary <div> tags on my blog site and learned about the <header> tag. A <div> tag with a class attribute was being used to display header text for my webpage, and I figured all I had to do was change <div class="header-bar"> to <header> on both my CSS and HTML. Except, simply doing that brought a problem: in dark mode, some properties for elements inside the <nav> tag weren't being displayed properly. It was as if the dark properties weren't being used at all. For the sake of brevity, I will be only showing a minimized version of the problematic CSS code:

/*
Source - https://stackoverflow.com/q/79820386
Posted by Karma Cool, modified by community. See post 'Timeline' for change history
Retrieved 2025-11-22, License - CC BY-SA 4.0
*/
:root {
  --accent-color: hsl(0 0% 50%);

  --color-percent-dark-offset: 25;
  --color-percent-light-offset: 40;

  --light-hsl-value: hsl(from var(--accent-color) h s calc(l + var(--color-percent-light-offset)));
  --dark-hsl-value: hsl(from var(--accent-color) h s calc(l - var(--color-percent-dark-offset)));
}

nav {
  background-color: var(--light-hsl-value);

  ul {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;

    li {
      display: flex;

      a {
        padding: 10px;
      }

      a:link {
        text-decoration: none;
        color: var(--dark-hsl-value);
      }

      a:visited {
        color: var(--dark-hsl-value);
      }
    }

    .current-section {
      border-width: 0 0 4px 0;
      border-style: solid;
      border-color: var(--dark-hsl-value);
    }

  }
}

header {
  display: flex;
  justify-content: center;
  background-color: var(--light-hsl-value);
  margin: 0;

  h1 {
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {

  header,
  nav {
    background-color: var(--dark-hsl-value);

    h1 {
      color: var(--light-hsl-value);
    }

    a:link,
    a:visited {
      color: var(--light-hsl-value);
    }

    .current-section {
      border-color: var(--light-hsl-value);
    }
  }
}

To get into even more detail: in the media query, nav's a and .current-section selectors were somehow being overriden by the normal variants, causing the navigation bar's links to be barely visible.

Navigation bar in light mode. The navigations links are visible.

Navigation bar in dark mode. The navigations links are barely visible since they blend into the background.

Trying to Figure Out the Solution

Step 1: Being Lazy and Asking ChatGPT

I first decided to ask ChatGPT, since it's the quickest way to get something. In a nutshell, ChatGPT started telling me that my problem was my use of nesting since it apparently wasn't supported by browsers (it actually works on every major browser). When I corrected ChatGPT about nesting support, it suggested that I was not using an ampersand, which was apparently a requirement (not actually a requirement for every major browser). When I corrected ChatGPT again, it suggested that combining the usage of commas and nesting was the cause due to an apparent bug that existed in older versions of Firefox and Chrome (the bug was happening in the latest versions). When I corrected ChatGPT about the browser versions I was using, it kept insisting that nesting selectors inside a selector list wasn't allowed by the CSS spec, which actually mentions nothing about this. At this point I gave and decided to ask the question in StackOverflow.

Step 2: Asking on StackOverflow

I posted the question to StackOverflow with better context, and about half a day later I was told to edit the question to have a minimal reproducible example. After editing my question, it was closed within a few hours since apparently my question was not reproducible or was being caused by a typo. I couldn't understand how the question would have a typo, nor did I get any explanation regarding the specifics, so I tried to update the images to more closely follow the minimal reproducible example, added some clarifications about needing dark mode to see the problem, and re-submitted the question for review. As a backup I decided to ask on Reddit, since I was pessimistic about StackOverflow re-opening the question based on some of my experiences with moderators on forums, and I still didn't get any answer from StackOverflow. To this day, the question still remains closed.

Step 3: Asking on r/webdev

I decided to repost the question on r/webdev, which involved painstakingly dealing with New Reddit's posting UI. It seems impossible to get out of a code block without resorting to destructive editing, embedded images seem to be only supported in the rich text editor, and trying to go back to markdown for easier editing would destroy any embedded images in the process. I could have just linked to the StackOverflow question, but for the sake of portability, I decided to repost the whole thing. There was also the concern that the post could get deleted by the auto-moderator, which has happened to me in the past.

I ended up with some initial bad answers, again regarding nesting being "only" supported on CSS pre-processors, as well as some answers that weren't specific enough. But after replying with each comment asking for specifics, someone was kind enough to give me an explanation which would help me debug the issue. All while the question on StackOverflow remained closed and unanswered.

The Solution

In a nutshell, the problem was with the weights of the selectors being lesser due to the weaker specificity in the media query selectors, which I wasn't aware was a thing before I started looking into the problem. Inside the selector list .header-bar, nav, the selectors for a and .current-section were less specific compared to what was outside the media query, but this was compensated by .header-bar being in the selector list, hence the higher weight. Once I changed .header-bar to header, the weight of the selectors inside the selector list decreased significantly such that it was being overriden by the rules outside the media query. To fix this properly, what needed to be done was to add descendant combinators to the affected selectors (i.e change a to ul li a in nav for the media query).

The Aftermath

While my StackOverflow version of the question remained unanswered, I gave the link to ChatGPT and Gemini to see if they could figure it out. ChatGPT still insisted on it being a selector/nesting issue. Gemini may have said something similar (unfortunately since I have Gemini Web Apps Activity turned off, that specific conversation is gone, so I can't recall the details). Apparently developers praise Claude for being the best, but I didn't bother with it because I didn't feel like making an account.

As for the StackOverflow question itself, I did eventually get the right answer there as well, but only as a comment (since the question is still closed), and that was about more than a day after I already got the answer from Reddit.

Takeaways

Always Ask an LLM to Cite Sources

Generally something I am already familiar with, but sometimes I tend to forget this habit. Asking LLMs to cite sources allows you to figure out how an LLM comes to a conclusion, and also allows you to come to your own conclusion whether to trust an LLM's output or not.

Reconsider Asking on StackOverflow First

While this is merely an anecdotal, one-time experience where Reddit was able to give an answer quicker than StackOverflow despite being less developer oriented, I can't help but wonder whether Reddit is the better (or rather quicker) option if I want to gain an answer to a tech question that can't be properly answered by an LLM. Unlike Discord, Reddit posts are public for anyone to view, and compared to StackOverflow, Reddit has a much larger and more lenient developer community, meaning there's a greater chance of getting help. However, StackOverflow's higher standards for questions tend to still keep it as the gold standard of developer Q&A, and it's post format is much better suited for developer questions compared to Reddit.

Let me know your thoughts via e-mail at mmkthecoolest@proton.me