Why My CSS Always Starts Ugly, and Why 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.