Heavy Inline Styles

What is this?

Imagine you are hosting a wedding and instead of printing one dress code card, you handwrite the dress code on every single invitation individually. That is what inline styles do to your HTML. Instead of defining styles once in a stylesheet and reusing them, inline styles repeat the same CSS declarations directly on every element — bloating your HTML, making maintenance a nightmare, and hurting performance.

Why it matters

• For your visitors: Inline styles increase the size of your HTML document, which means longer download times. The browser also cannot cache inline styles the way it caches external stylesheets, so every page load pays the full cost. On slower connections, this adds up fast.
• For your business: Pages with heavy inline styles are harder to maintain and update. Changing a color means hunting through every element instead of updating one class. This slows your development speed and increases the chance of visual inconsistencies that make your brand look sloppy.
• The standard: CSS best practice is to separate content (HTML) from presentation (CSS). External or embedded stylesheets let the browser cache styles, reduce HTML payload, and enable consistent design across pages. Inline styles should be reserved for truly dynamic, one-off values.

<style>
  .card { padding: 16px; background: #1a1a1a; border-radius: 8px; }
  .card-title { font-size: 18px; font-weight: bold; color: #fff; }
</style>

<div class="card">
  <h3 class="card-title">Feature One</h3>
</div>
<div class="card">
  <h3 class="card-title">Feature Two</h3>
</div>

<div style="padding: 16px; background: #1a1a1a; border-radius: 8px;">
  <h3 style="font-size: 18px; font-weight: bold; color: #fff;">Feature One</h3>
</div>
<div style="padding: 16px; background: #1a1a1a; border-radius: 8px;">
  <h3 style="font-size: 18px; font-weight: bold; color: #fff;">Feature Two</h3>
</div>

How to fix it

React / Next.js

If you are using Tailwind CSS (which most AI-generated projects do), you are already on the right track — Tailwind classes get compiled to a stylesheet. The problem usually comes from style={{}} props scattered everywhere.

// Bad: inline style objects on every element
function Card({ title }: { title: string }) {
  return (
    <div style={{ padding: "16px", background: "#1a1a1a", borderRadius: "8px" }}>
      <h3 style={{ fontSize: "18px", fontWeight: "bold", color: "#fff" }}>{title}</h3>
    </div>
  );
}

// Good: Tailwind utility classes (compiled to a cacheable stylesheet)
function Card({ title }: { title: string }) {
  return (
    <div className="bg-neutral-900 p-4">
      <h3 className="text-lg font-bold text-white">{title}</h3>
    </div>
  );
}

For truly dynamic values (like user-set colors or calculated positions), use CSS custom properties:

function ProgressBar({ percent }: { percent: number }) {
  return (
    <div className="h-2 rounded-full bg-neutral-800">
      <div
        className="h-full rounded-full bg-primary transition-all"
        style={{ width: `${percent}%` }} // dynamic value — inline style is fine here
      />
    </div>
  );
}

Plain HTML

Extract repeated inline styles into a <style> block or an external stylesheet.

<!-- Before: repeated inline styles -->
<p style="color: #ccc; line-height: 1.6; margin-bottom: 1rem;">Paragraph one</p>
<p style="color: #ccc; line-height: 1.6; margin-bottom: 1rem;">Paragraph two</p>

<!-- After: one class, reused everywhere -->
<style>
  .body-text {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
</style>
<p class="body-text">Paragraph one</p>
<p class="body-text">Paragraph two</p>

How the cat scores this

The scanner counts the total number of style attributes in your HTML and measures the average length of inline style declarations. A handful of short dynamic styles are normal and not penalized. But when more than 30% of visible elements carry inline styles, or when the total inline CSS exceeds 5KB, the cat flags it. Repeated identical inline styles are weighted more heavily because they are the clearest sign that a stylesheet should be used instead.

Further reading

• MDN: When to use inline styles — Mozilla's guide to CSS structure
• web.dev: Extract critical CSS — how to optimize CSS delivery
• Tailwind CSS — utility-first CSS that compiles to a cacheable stylesheet