CSS-Klassennamen-Obfuskator
Verkürzen Sie CSS-Klassennamen auf ein- und zweistellige Namen, um Ihre Stylesheets zu verschleiern. Fügen Sie Ihr CSS und das zugehörige HTML ein, erhalten Sie eine Umbenennungstabelle mit Vorher/Nachher-Vorschauen für CSS und HTML und kopieren Sie den transformierten Code - alles kostenlos und privat, ohne Registrierung.
Paste your CSS and HTML below. All CSS class names will be shortened to the shortest possible single/double-character names. A rename mapping table shows every original name, its replacement, and total characters saved.
Rename Mapping (13 classes)
| # | Original | Short | Occurrences | Chars Saved |
|---|---|---|---|---|
| 1 | .btn | .a | 11 | −22 |
| 2 | .btn-primary | .b | 4 | −40 |
| 3 | .btn-secondary | .c | 3 | −36 |
| 4 | .card | .d | 13 | −39 |
| 5 | .card-body | .e | 3 | −24 |
| 6 | .card-footer | .f | 3 | −30 |
| 7 | .card-header | .g | 3 | −30 |
| 8 | .footer | .h | 9 | −45 |
| 9 | .footer-link | .i | 4 | −40 |
| 10 | .header | .j | 14 | −70 |
| 11 | .header-nav | .k | 7 | −63 |
| 12 | .header-nav-item | .l | 5 | −70 |
| 13 | .header-title | .m | 2 | −22 |
CSSObfuscated CSS
.j { background: #1a1a2e; color: #fff; padding: 1rem; }
.m { font-size: 1.5rem; font-weight: 700; }
.k { display: flex; gap: 1rem; }
.l { cursor: pointer; padding: 0.5rem 1rem; border-radius: 4px; }
.l:hover { background: rgba(255,255,255,0.1); }
.d { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
.g { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.e { line-height: 1.6; color: #475569; }
.f { border-top: 1px solid #e2e8f0; padding-top: 1rem; margin-top: 1rem; }
.a { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; cursor: pointer; border: none; }
.b { background: #3b82f6; color: #fff; }
.b:hover { background: #2563eb; }
.c { background: #e2e8f0; color: #1e293b; }
.c:hover { background: #cbd5e1; }
.h { text-align: center; padding: 2rem; color: #94a3b8; font-size: 0.875rem; }
.i { color: #3b82f6; text-decoration: none; }
.i:hover { text-decoration: underline; }HTMLObfuscated HTML
<div class="j">
<div class="m">My App</div>
<nav class="k">
<span class="l">Home</span>
<span class="l">About</span>
<span class="l">Contact</span>
</nav>
</div>
<div class="d">
<div class="g">Welcome</div>
<div class="e">
This is a sample card component. The CSS classes on this page will be
shortened to single or double-character names for obfuscation.
</div>
<div class="f">
<button class="a b">Get Started</button>
<button class="a c">Learn More</button>
</div>
</div>
<div class="d">
<div class="g">Features</div>
<div class="e">CSS class name obfuscation helps protect your styling structure from casual inspection.</div>
<div class="f">
<button class="a b">View Details</button>
</div>
</div>
<div class="h">
<span>© 2026 My App — </span>
<a class="i" href="/privacy">Privacy</a>
<a class="i" href="/terms">Terms</a>
</div>Privacy Guarantee
All processing runs entirely in your browser. Your CSS, HTML, and the generated mappings never leave your device — no uploads, no API calls, no tracking.
Funktionen
- Doppelte Eingabe (CSS + HTML): Fügen Sie sowohl Ihr Stylesheet als auch Ihr HTML-Markup ein. Das Tool gleicht beide ab, damit jeder im HTML verwendete Klassenname eine passende Umbenennung hat, und auch nicht referenzierte CSS-Klassen werden verkürzt.
- Kürzestmögliche Namen: Klassennamen werden zu den kleinsten Einzelzeichen-Namen (a-z, A-Z, _) und dann zu Zweizeichennamen (aa, ab usw.) verkürzt, damit Ihre Ausgabe so kompakt wie möglich bleibt.
- Vollständige Umbenennungstabelle: Eine farbcodierte Tabelle zeigt jeden ursprünglichen Klassennamen, seinen kurzen Ersatz, die Anzahl der Vorkommen und die insgesamt eingesparten Zeichen. Kopieren Sie die Tabelle als JSON für Ihre Build-Pipeline.
- Live-Vorher/Nachher-Vorschauen: Sehen Sie, wie sich obfuskiertes CSS und obfuskiertes HTML in Echtzeit aktualisieren, während Sie die Eingabe bearbeiten. Kopieren Sie den transformierten Code jeder Ausgabe mit einem Klick.
Was ist CSS-Klassennamen-Obfuskierung?
Die Obfuskierung von CSS-Klassennamen ersetzt beschreibende, menschenlesbare Klassennamen in Ihren Stylesheets und Ihrem Markup durch kurze, bedeutungslose Namen. So kann beispielsweise .header-nav-item zu .a werden, .card-body zu .b und so weiter. Das Tool erzeugt automatisch die kürzestmöglichen Namen und wendet die Zuordnung konsistent auf CSS und HTML an.
So funktioniert die Klassennamenverkürzung
Das Tool extrahiert jeden eindeutigen Klassennamen aus Ihren CSS-Selektoren und Ihren HTML-class-Attributen. Anschließend erzeugt es eine Umbenennungstabelle mit den kürzesten verfügbaren Namen - zuerst Einzelzeichen (a bis z, A bis Z und Unterstrich), dann Zweizeichen (aa, ab, ..., _z) und so weiter. Jeder ursprüngliche Name wird in beiden Dateien konsistent ersetzt, damit Ihre Styles nach der Obfuskierung weiterhin korrekt angewendet werden.
Vorteile bei der Größenreduzierung
Über die Obfuskierung hinaus bringt die Verkürzung von Klassennamen echte Bandbreiteneinsparungen. Eine BEM-artige Klasse wie .product-card__title--featured (31 Zeichen), die auf .a (1 Zeichen) schrumpft, spart 30 Zeichen pro Vorkommen. Bei Dutzenden Klassen, die hunderte Male in einem großen Stylesheet auftauchen, können die kumulierten Einsparungen Tausende Zeichen in CSS und HTML erreichen.
Grenzen und Hinweise
CSS-Klassennamen-Obfuskierung funktioniert am besten, wenn Sie sowohl das Stylesheet als auch das Markup kontrollieren. Wenn Sie dynamische Klassennamen verwenden, die per JavaScript erzeugt werden (z. B. String-Verkettung oder Template-Literale), kann das Tool diese Referenzen nicht verfolgen und sie bleiben unverändert. Ebenso werden Klassennamen, die in Bibliotheken Dritter oder inline in JavaScript-Dateien außerhalb der CSS/HTML-Eingaben verwendet werden, nicht umbenannt. Das Tool schließt CSS-Pseudoklassen (:hover), Pseudoelemente (::before) und At-Regeln (@media) aus, damit diese funktionsfähig bleiben.
Häufig gestellte Fragen
Die Obfuskierung von CSS-Klassennamen ersetzt beschreibende, semantische Klassennamen (wie .header-nav-item oder .product-card__price) durch kurze, bedeutungslose Namen (wie .a, .b, .c). Dadurch wird es für Wettbewerber, Scraper und automatisierte Tools schwieriger, Ihre Seitenstruktur aus HTML und CSS zu verstehen. Zudem sinkt die Dateigröße, da lange Klassennamen durch ein- oder zweistellige Entsprechungen ersetzt werden.
Ja, aber mit Einschränkungen. Tailwind erzeugt Utility-Klassen wie .flex, .text-center und .bg-blue-500, die direkt im HTML angewendet werden. Dieses Tool erkennt und benennt jeden Klassennamen um, den es in Ihrem CSS und HTML findet. Wenn Sie jedoch die @apply-Direktive von Tailwind oder eigenes CSS verwenden, das Utility-Klassen referenziert, werden auch diese Referenzen konsistent umbenannt. Das Tool ist frameworkunabhängig - es findet einfach Klassennamen in Ihren CSS-Selektoren und HTML-Attributen.
Ja, solange Sie CSS und HTML gemeinsam verarbeiten. Das Tool wendet dieselbe Umbenennungstabelle auf beide Dateien an, sodass .card-body in Ihrem CSS genauso zu .b wird wie class="card-body" im HTML zu class="b". Jedes Vorkommen jedes Klassennamens wird konsistent ersetzt. Einzige Ausnahme sind Klassennamen, die dynamisch in JavaScript referenziert werden (z. B. per String-Verkettung), was dieses Tool nicht erkennen kann.
Das Tool erzeugt die kürzestmöglichen eindeutigen Namen nach einer festen Zuteilungsstrategie: zuerst alle Einzelzeichen (a-z, A-Z, Unterstrich - 53 Namen), dann alle Zweizeichenkombinationen (aa, ab, ..., _z - 2.809 Namen) und schließlich bei Bedarf Dreizeichenkombinationen. Das deckt bis zu ~790.000 eindeutige Klassennamen ab, weit mehr, als ein echtes Stylesheet enthalten würde. Die Reihenfolge ist deterministisch - der erste Klassennamen alphabetisch erhält immer „a“, der zweite „b“, usw.
Ja. Die Umbenennungstabelle zeigt jede Zuordnung von Original zu Kurzname, und Sie können die vollständige Tabelle per Kopier-Schaltfläche als JSON kopieren. Dieses JSON lässt sich in Ihre Build-Pipeline integrieren - etwa mit einem PostCSS-Plugin oder einem eigenen Webpack-Loader -, sodass Klassennamen während des Produktions-Builds automatisch obfuskiert werden.
Das Tool arbeitet mit rohem CSS und HTML-/JSX-Text. Für CSS-in-JS (styled-components, Emotion usw.) fügen Sie den Inhalt des CSS-Template-Literals direkt in die CSS-Eingabe ein. Für CSS Modules fügen Sie das Quell-CSS und das JSX ein, das die Modulklassennamen verwendet. Das Ausgabe-CSS/HTML können Sie anschließend in Ihr Framework Ihrer Wahl zurückübertragen. Die Umbenennungstabelle ist besonders für die Konfiguration von CSS Modules nützlich.
Absolut. Der CSS-Klassennamen-Obfuskator läuft zu 100 % in Ihrem Browser. Ihr CSS, Ihr HTML und die erzeugten Tabellen verlassen nie Ihr Gerät. Es gibt keine Analysen, keine API-Aufrufe, keine serverseitige Verarbeitung und keine Datenspeicherung jeglicher Art. Ihre Privatsphäre ist vollständig geschützt.
Ja - 100 % kostenlos, ohne Registrierung, ohne Konto und ohne Nutzungslimits. Obfuskieren Sie so viele Stylesheets wie nötig, mit beliebig vielen Klassennamen, so oft Sie möchten. Keine Premium-Stufen, keine versteckten Kosten und keine Ratenlimits - für immer kostenlos.