Project ideas from Hacker News discussions.

Improving site performance by shipping more CSS

📝 Discussion Summary (Click to expand)

1. CSS class naming – bloated, hard‑to‑read names vs. short hashes
Many commenters criticize GitHub’s long generated class names (e.g., DirectoryContent-module__Box_3__gl6dE) for inflating CSS size and hurting performance, and advocate shorter hash‑based names for better gzip/brotli compression.

“Currently, the production build is using long‑dev class names. e.g. DirectoryContent-module__Box_3__gl6dE could be compiled to a shorter hash like gl6DE3a2.” – efortis
“The only thing hashing classes achieves is making it difficult for users to use ad blockers and/or custom CSS.” – notpushkin
“The improvement would be shipping human‑readable structure to allow easier user overrides, not that hash abomination.” – eviks

2. Whether performance optimizations are worth the cost at scale
A recurring debate centers on measuring performance, the excuses teams make, and the point of diminishing returns when a codebase is large.

“Performance is not complicated. You measure something and compare the numbers…. The shitty team excuse…. Throwing performance data away and lying about it…. Guessing.” – austin‑cheney
“You measure and improve the metric, but at what cost, when should you stop? Have you worked on a 1 M+ LOC web app?” – karolusrex
“Isn’t this backwards? Optimizing assets becomes more important with scale, not less.” – jchw
“No, we’re asking for it to be taken seriously by the organisation… Their work is ‘subjective’ improvements but often it’s just building tooling.” – maccard

3. Organizational and practical constraints – legacy, design systems, and refactor feasibility
Defenders point out that large, modularized codebases have real constraints (design systems, legacy code, chunking) that make sweeping CSS rewrites non‑trivial, though incremental approaches or tooling (functional CSS, LLMs) can help.

“These type of comments often come from a place of arm‑chair reasoning where you might not sit on the experience of working hands‑on in a large team on a large product…. Maintaining a design system, working with scoped classes, legacy code, and dealing with the complexities of chunking…” – karolusrex
“The beauty of functional CSS is that you can progressively transform everything. GitHub runs on an entire modularized codebase, they can clean up the entire codebase within weeks, days if they use agents…” – meerita
“With modern LLMs you can vendor the design system around and cut it to the bone on every app. If your organization ships a worse solution than Claude slop, do you really want to stick with it?” – blfr
“You can have both [CSS‑in‑JS and CSS modules] while also not shipping any JS runtime for CSS in JS!” – lloydatkinson (referencing vanilla‑extract).


🚀 Project Ideas

CSS Class Name Shortener with Source Map Generator

Summary

  • A Vite/Webpack plugin that replaces long CSS module names with short, deterministic names (e.g., base52 sequential) while emitting a source map linking original names to short names.
  • Core value: smaller CSS payload for production and readable names for debugging, ad‑blockers, and user stylesheets without sacrificing collision safety.

Details

Key Value
Target Audience Frontend engineers using CSS Modules or CSS‑in‑JS who care about bundle size and debuggability
Core Feature Generates short deterministic class names + source map; optional mode for readable dev names
Tech Stack Node.js, Rollup/Vite plugin API, PostCSS for AST, base52 encoding
Difficulty Medium
Monetization Hobby

Notes

  • HN users complained about unreadable hashed class names (DirectoryContent-module__Box_3__gl6dE) hindering debugging and custom CSS (eviks, chrismorgan). This plugin directly addresses that by providing readable mapping.
  • Enables ad‑blocker/user‑stylesheet writers to target elements via the source map, answering the request for easier overrides.

GitHub User Style Overrider Extension

Summary

  • Browser extension that intercepts GitHub’s CSS requests, applies a pre‑generated mapping (from the shortener plugin or a public CDN) to translate hashed class names back to readable selectors, allowing users to inject custom styles or ad‑block rules.
  • Core value: restores ability to customize GitHub UI despite its hashed class‑name approach, improving usability for power users.

Details

Key Value
Target Audience GitHub power users, accessibility tweakers, ad‑blocker enthusiasts
Core Feature Dynamically rewrites CSS selector text using a mapping file; UI to enable/disable sites
Tech Stack Manifest V3 (Chrome/Firefox), JavaScript, optional Webpack to bundle mapping
- Difficulty Low
Monetization Hobby

Notes

  • Commenters noted hashed class names make it “difficult for users to use ad blockers and/or custom CSS” (notpushkin). This extension solves that by providing a translation layer.
  • Could be bundled with the source map from Idea 1, giving HNers a practical tool they can deploy immediately.

Deterministic CSS Naming Service (CSS Names as a Service)

Summary

  • Hosted API/CDN that accepts a CSS file (or CSS Modules output) and returns a version with globally deterministic short class names (e.g., incremental base52) plus an optional source map; ensures identical names across builds and teams.
  • Core value: eliminates non‑deterministic hashes, improves caching, reduces CSS size, and simplifies debugging/extension authoring at scale.

Details

Key Value
Target Audience Large web applications, design‑system teams, companies seeking reproducible builds
Core Feature API endpoint: POST CSS → receive minified CSS with short names + source map; edge caching
Tech Stack Go or Rust backend, Redis for name counter, CDN (Cloudflare Workers), PostCSS for processing
Difficulty High
Monetization Revenue-ready: tiered pricing (free tier for <10k requests/mo, paid plans for higher volume and SLA)

Notes

  • HN discussers pointed out that non‑deterministic hashes break ad‑blockers and make debugging painful (chrismorgan, eviks). A deterministic naming service guarantees same names across deploys, addressing that.
  • Service could be integrated into CI pipelines, giving teams a simple way to reap the size benefits discussed (efortis, chrismorgan) while keeping readability via source maps.

Read Later