Why My CSS Always Starts Ugly — And That’s a Good Thing

I need you to know this: if your CSS looks ridiculous at first, you’re probably doing it right.

When I start building a layout, my stylesheets aren’t polished. They’re loud. Brutal. Sometimes they’re embarrassing. Clashing colors. Unstyled buttons. Debug borders everywhere. But that’s not failure — that’s the sketchbook stage. That’s what progress looks like before it gets its makeup on.

I’m Not Designing — I’m Assembling Structure

At this stage, I’m not hunting for elegance. I’m hunting for logic:

  • Does the page flow properly?
  • Is the spacing consistent?
  • Are the components decoupled and reusable?

It’s easier to answer those questions when I’m not distracted by pretty colors or perfect typography. I want contrast. Clarity. Chaos, even. Just until I know what belongs where.

My “Ugly First” Toolkit

Here’s what my CSS often includes in the first 30 minutes of a build:

*, *::before, *::after {
  outline: 2px solid red !important;
}

body {
  background: hotpink;
  font-family: monospace;
}

.btn {
  background: yellow;
  color: black;
  padding: 1rem;
  font-size: 2rem;
  text-transform: uppercase;
}

This isn’t for style. It’s for visibility. I want every element to scream at me until I know it’s in the right place. Then — and only then — do I tone it down and reintroduce finesse.

Why It Works (Even on Teams)

Some developers think this is amateurish. I call it iterative. When I build with teams, this method has major benefits:

  • Review cycles are faster — we’re checking structure, not polish.
  • Client feedback is sharper — they focus on layout, not color.
  • Developers stay in flow — no getting stuck tweaking border-radius when layout is still broken.

Think of it like wireframing — but in live code. It keeps the stakes low and the decisions honest.

Perfection Comes in Passes

After my “ugly” phase, I move into refinement:

  • I replace wild colors with design tokens.
  • I clean up selector bloat and naming.
  • I run linting, test responsiveness, and fine-tune transitions.

But that second pass only works because the first pass was honest. I didn’t waste time pretending things were finished when they weren’t.

A Word to Juniors (and Their Managers)

If you’re new to front-end work, you might feel embarrassed when your first draft looks like a paint explosion. Don’t be. Every great dev I know has a debug.css file hidden in their drawer — or at least in their muscle memory.

Ugly-first isn’t lazy. It’s strategic. Just like sketching in pencil before ink. We’re not skipping polish — we’re just saving it for the right moment.

Final Thought

Ugly CSS isn’t a mess. It’s a map. And sometimes, the fastest way to build something beautiful is to stop pretending it needs to start that way.

Want help reviewing a work-in-progress layout? Or need to teach your team to sketch before styling? Contact me here and I’ll walk through it with you — mess and all.