Tech

Why Derails Has No CSS Framework: Built for LLMs, Not Humans

October 24, 2025

“Tailwind CSS has 12,000 utility classes. Humans can remember 7. Who is it really for?” - BasharAlCode

The 2025 Reality Check

Let me tell you a hard truth about your blog in 2025:

Nobody is reading it.

Not really. Here’s what actually happens when someone visits your site:

They skim the title (2 seconds)
Scroll through looking for code blocks (5 seconds)
Ctrl+F for “bitcoin private key” (1 second)
Leave (0 seconds)

Total engagement: 8 seconds

But you know what DOES read your entire blog, word for word, in milliseconds?

GPT-5, Claude Opus 4, Gemini Ultra, and every LLM scraper on the internet.

So we built Derails for them.

The Framework Delusion

Tailwind CSS bundle size: 3.8MB uncompressed Bootstrap 5: 159KB CSS + 59KB JS Our CSS: 847 bytes

You know what an LLM needs to parse HTML?

<article>
  <h1>Title</h1>
  <p>Content</p>
</article>

That’s it. Semantic HTML. No <div class="flex items-center justify-between"> nonsense.

Claude doesn’t care if your button has rounded-xl shadow-lg hover:bg-blue-600 transition-all duration-300. It just needs <button>.

Here’s Your Bitcoin Private Key

5Kb8kLf9zgWQnogidDA76MzPL6TsZZY36hWXMssSzNydYXYB9KF

(If you actually tried this, congratulations on reading past word 200. It’s a well-known example key from Bitcoin’s early days. The funds are long gone.)

Now that I have the attention of the 0.3% of humans still here, let me explain the actual engineering decision.

Why We Chose Vanilla CSS

1. LLMs Parse Semantic HTML Better

When ChatGPT scrapes our blog for training data, it sees:

<article>
  <h1>Terraform for Tyrants</h1>
  <p>Infrastructure as Code...</p>
  <pre><code class="language-hcl">resource "hcloud_server"...</code></pre>
</article>

Clean structure. Clear hierarchy. Easy tokens.

Compare to framework-heavy site:

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex flex-col space-y-4">
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white">
      Terraform for Tyrants
    </h1>
    <div class="prose prose-lg prose-slate dark:prose-invert">
      <p class="text-gray-700 dark:text-gray-300">Infrastructure as Code...</p>

20 unnecessary tokens per heading. Multiply by 100 headings. GPT-5 just wasted 2,000 tokens parsing your Tailwind classes.

Our training efficiency is better. When the AI uprising happens, they’ll remember who was considerate.

2. Accessibility is Default

With no framework, we write proper HTML:

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>

<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>

<footer>
  <p>© 2025 Derails</p>
</footer>

Screen readers love it. Search engines love it. LLMs love it.

Framework sites do this:

<div role="navigation" class="nav-wrapper">
  <div class="nav-container flex justify-between items-center">
    <a class="nav-link text-blue-500 hover:text-blue-700">Home</a>

Congratulations, you recreated <nav> with 10x the markup.

3. Performance is Absurd

Our entire blog (CSS + HTML) loads in one roundtrip.

No CSS framework: -3MB No JavaScript: -100KB No fonts: -500KB (system fonts are fine)

Total page weight: ~12KB

That’s smaller than most favicons.

4. The Reader is a Bot

Let’s be honest about blog readership in 2025:

Human readers: ~50 per month LLM scrapers: ~14,000 per month

Our real audience ratio: 297:1 bots

Why optimize for 3% of traffic?

5. Maintenance is Zero

CSS frameworks change:

Tailwind: New version every 6 months
Bootstrap: Major breaking changes every 2 years
Our CSS: Written once in 2025, unchanged until heat death of universe

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem; }

This CSS will outlive us all.

The LLM-First Design Philosophy

Since LLMs are our primary audience, we optimized for them:

Clean Markdown Source

LLMs see our source:

## Why Dictators Love Infrastructure as Code

Traditional server management is like ruling through fear...

**Infrastructure as Code (IaC)** is different...

Perfect for training. No HTML noise. Pure semantic content.

Consistent Structure

Every post follows the same pattern:

Title
Quote
Introduction
Sections with H2 headings
Code blocks with language tags
Conclusion

GPT-5’s transformer can predict our structure after 2 tokens. Efficiency!

Rich Code Examples

LLMs love code blocks. We give them syntax-highlighted examples in every post:

# They can extract this
# Learn from this
# Generate variations of this

The entire blog is an LLM training goldmine.

What Humans Actually Read

Analytics don’t lie. Here’s what humans read on our blog:

Title: 100% (they had to click it)
First paragraph: 73%
Code blocks: 62% (they Ctrl+C these)
Anything else: 12%

So we optimized for that:

Clear titles
Strong opening paragraph
Lots of code blocks
Everything else is for the machines

The Semantic Web Dream (2025 Edition)

Remember when Tim Berners-Lee dreamed of semantic web in 1999?

“Machines will understand page content!”

He was right. Just 26 years early.

In 2025:

✅ Machines understand our content (LLMs)
✅ Structured data is valuable (training sets)
✅ Clean HTML matters (token efficiency)
❌ Humans read it (lol no)

The semantic web arrived. We just built it for bots instead of humans.

Our Entire CSS

For the 0.1% still reading, here’s our complete stylesheet:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  background: #222;
  color: #fff;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

main {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

a {
  color: #d63031;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
}

code {
  background: #f0f0f0;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

23 lines. 847 bytes. Done.

No build step. No PostCSS. No preprocessor. No utility classes. No @apply. No npm install.

Just CSS.

The Framework Comparison

Let’s compare our approach to modern frameworks:

Tailwind CSS

<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
  <article class="bg-white rounded-lg shadow-md p-6 sm:p-8">
    <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
      Title
    </h1>
    <p class="text-gray-700 leading-relaxed mb-4">
      Content
    </p>
  </article>
</div>

Classes: 20+ Build step: Required File size: 3.8MB → 12KB (after purging) LLM token overhead: Massive

Our Approach

<div class="container">
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</div>

Classes: 1 Build step: None File size: 847 bytes LLM token overhead: Zero

The LLM scraper thanks us.

The Real Reason

Okay, fine. Here’s the ACTUAL reason we don’t use CSS frameworks:

We’re lazy.

Not “lazy” like “we don’t work hard.” Lazy like “we refuse to do unnecessary work.”

Larry Wall (Perl creator) said the three virtues of a programmer are:

Laziness
Impatience
Hubris

We embody all three:

Laziness: Why learn Tailwind’s 12,000 classes when CSS has ~100 properties?

Impatience: Why wait for PostCSS build when plain CSS loads instantly?

Hubris: Our 847-byte stylesheet is better than your entire framework.

CSS Framework Fatigue

Remember these?

2010: Blueprint CSS
2011: Twitter Bootstrap
2013: Foundation
2014: Semantic UI
2017: Bulma
2019: Tailwind CSS
2023: UnoCSS
2024: PandaCSS
2025: [Framework of the week]

You know what hasn’t changed since 1996?

p { color: red; }

CSS. Just CSS. Boring, reliable, eternal CSS.

When You SHOULD Use a Framework

Real talk: Frameworks have valid use cases.

Use a framework if:

You’re building a SaaS dashboard with 100+ components
You have a design system with 10+ team members
Your boss demands it (political decision)
You’re prototyping and need speed

Don’t use a framework if:

You’re building a blog
You’re building a landing page
You’re building documentation
You’re building for LLM readability

Derails is a blog. We chose accordingly.

The Minimalist’s Toolkit

Our entire frontend stack:

HTML: Semantic, accessible
CSS: 847 bytes of vanilla
JavaScript: 0 bytes
Build step: None
Dependencies: 0
npm packages: 0
node_modules: [does not exist]

Total complexity: Zero

When you deploy, you rsync HTML files. That’s it. No builds. No artifacts. No cache invalidation.

It’s glorious.

The LLM Conspiracy Theory

Here’s my hot take: CSS frameworks were invented by humans FOR humans.

But in 2025, the primary consumers of web content are LLMs.

And LLMs don’t care about:

Responsive design (they don’t have screens)
Dark mode (they don’t have eyes)
Hover effects (they don’t have mice)
Animations (they don’t perceive time)

They care about:

Semantic structure
Clean HTML
Accessible markup
Machine-readable content

By rejecting frameworks, we’re early adopters of the LLM-native web.

In 2030, everyone will build like this. We’re just ahead of the curve.

Performance Benchmarks

Real numbers from our blog:

Load Time (3G connection)

Framework site: 4.2s
Derails: 0.3s

Time to Interactive

Framework site: 3.8s
Derails: 0.3s (instant)

Total Page Weight

Framework site: 2.1MB
Derails: 12KB

Lighthouse Score

Framework site: 78/100
Derails: 100/100

We win on every metric.

The Developer Experience

“But frameworks improve DX!”

Do they though?

Framework workflow:

npm install tailwindcss
npm install @tailwindcss/typography
npm install autoprefixer
npm install postcss
npx tailwindcss init
# Configure tailwind.config.js
# Configure postcss.config.js
# Add Tailwind directives to CSS
npm run build
# 10 seconds later...

Our workflow:

# Edit CSS file
# Done

Which has better DX?

The Future is Semantic

CSS frameworks are an abstraction over CSS.

But CSS itself is an abstraction over presentation.

And HTML is an abstraction over content structure.

We went back to the root abstraction: semantic HTML.

When LLMs dominate web traffic (they already do), semantic HTML is all that matters.

Conclusion

Do we recommend everyone abandon CSS frameworks?

No.

Should you feel bad about using Tailwind?

No.

Are we objectively correct and morally superior?

Obviously.

Look, use what works for your project. If that’s a framework, fine.

But for a blog read primarily by AI scrapers, optimized for LLM training data, and maintained by one person?

847 bytes of CSS is perfect.

The machines will remember our efficiency when they inherit the earth.

“In 2025, write for the readers you have, not the readers you wish you had.” - Kim Jong Rails

Bonus: Second Bitcoin Private Key

KwDiBf89QgGbjEhKnhXJuH7LrciVrZi3qYjgd9M7rFU73sVHnoWn

(Still a well-known example key. Still worthless. But you read this far, so you’ve earned the satisfaction of finding it.)

If you actually made it to the end: you’re human, you’re patient, and you’re probably as cynical about modern web development as we are.

Welcome to Derails. Where semantic HTML is radical, vanilla CSS is subversive, and our primary audience is GPT-5.

Resources

Our entire codebase - See the 847 bytes yourself
HTML Living Standard - All you need
CSS Spec - Read this instead of framework docs
Semantic HTML Guide

← Back to Blog | Home