Simple CSS task required 5 attempts — cascade order not handled correctly

Bug Description

Claude Code (Opus 4.6, 1M context) failed to add a simple mobile title text to a fixed top bar — a basic CSS task that should be completed in 1 attempt. It took 5 consecutive attempts to resolve what was ultimately a CSS cascade ordering mistake.

What I Asked

"Add a mobile title ('Notes to Speak') to the top bar that shows on mobile and hides the About link."

This is a straightforward task: define a .top-bar-mobile-title class with display:none by default, then display:block inside a media query.

What Happened (5 Attempts)

1. Attempt 1: Placed display:block inside @media(max-width:600px) but the base class definition (display:none) was written after the media query in the stylesheet. Also the breakpoint was too small for the test device.

1. Attempt 2: Changed breakpoint to 900px — still didn't work because the cascade order issue remained (base class still defined after the media query).

1. Attempt 3: Misdiagnosed the problem as a position:relative issue on the parent element. Added position:relative to a position:fixed element (which doesn't even make sense). Still broken.

1. Attempt 4: Changed approach from position:absolute centering to margin-left:auto. Still didn't fix it because the root cause (cascade order) was never addressed.

1. Attempt 5: Finally identified the actual problem — the base CSS class with display:none was defined after the @media block, so due to CSS cascade rules (same specificity, later declaration wins), display:none always overrode display:block from the media query.

Root Cause

/* This was the broken order: */
@media(max-width:900px){
  .top-bar-mobile-title{display:block}  /* This was written first */
}
.top-bar-mobile-title{
  display:none;  /* This came AFTER, so it always won */
}

/* Fix was simply reordering: */
.top-bar-mobile-title{
  display:none;  /* Base style first */
}
@media(max-width:900px){
  .top-bar-mobile-title{display:block}  /* Override second */
}

Why This Is Concerning

• CSS cascade order is a fundamental concept — not an edge case
• The model failed to diagnose its own mistake for 4 consecutive attempts
• Each wrong attempt introduced unnecessary complexity (position:relative, margin-left:auto) instead of examining the actual CSS output
• A human junior developer would likely catch this on the first or second try by inspecting the element in DevTools
• The user had to wait through 5 round-trips for something that should have been instant

Environment

• Model: Claude Opus 4.6 (1M context)
• Tool: Claude Code CLI
• Task type: Static HTML/CSS editing (no framework, no build step)

🤖 Generated with Claude Code