Skip to main content

Reading and Fixing AI-Generated CSS

AI makes mistakes. This guide teaches you to audit, fix, and improve AI-generated CSS quickly.

1. The 5-Point Audit Checklist​

Run every AI-generated CSS through this checklist before using it:

  • Box Sizing: Does the reset include *, *::before, *::after { box-sizing: border-box; }?
  • Responsive: Does it use max-width, %, vw, rem instead of fixed px for layout?
  • Color Variables: Are colors defined as CSS variables, not hardcoded?
  • Font Stack: Does font-family have fallbacks at the end?
  • Z-index: Are z-index values sensible (not arbitrary like z-index: 9999)?

2. Common AI Bugs and Fixes​

Bug: Overflowing on mobile​

/* AI Generated (BROKEN) */
.container { width: 960px; }

/* Fixed */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

Bug: Absolute element escaping its parent​

/* AI forgot to set parent as positioned */
.card {}  /* Missing position: relative; */
.badge { position: absolute; top: 0; }

/* Fixed: parent must be positioned */
.card  { position: relative; }
.badge { position: absolute; top: var(--space-2); left: var(--space-2); }

Bug: Flexbox children not wrapping​

/* AI forgot flex-wrap */
.grid { display: flex; }

/* Fixed */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

3. Refactoring AI CSS into a System​

When AI generates valid but messy code, refactor it:

  1. Extract repeated values → CSS variables.
  2. Rename classes → Follow BEM naming.
  3. Group rules → Layout, typography, then skin.
  4. Remove unused rules → Browser DevTools coverage panel.

4. Browser DevTools as Your Debugging Partner​

  • Elements panel: See the computed styles applied to any element.
  • Sources panel: Live-edit CSS and see changes immediately.
  • Network panel: Confirm which CSS file is loaded.
  • Console: Run window.getComputedStyle(el).getPropertyValue('--color-primary') to debug CSS variables.