Pengabur Nama Kelas CSS
Perpendek nama kelas CSS menjadi nama satu/dua karakter untuk mengaburkan stylesheet Anda. Tempel CSS dan HTML yang sesuai, dapatkan tabel penggantian nama dengan pratinjau sebelum/sesudah untuk CSS dan HTML, lalu salin kode hasil transformasi — semua gratis dan privat, tanpa pendaftaran.
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.
Fitur
- Input Ganda (CSS + HTML): tempel stylesheet dan markup HTML Anda. Alat mencocokkan keduanya untuk memastikan setiap nama kelas yang dipakai di HTML punya penggantian nama, dan kelas di CSS yang tidak dirujuk tetap diperpendek.
- Nama Terpendek yang Mungkin: nama kelas diperpendek ke nama satu karakter terkecil (a-z, A-Z, _), lalu nama dua karakter (aa, ab, dll.), menjaga keluaran tetap ringkas.
- Tabel Penggantian Nama Lengkap: tabel berwarna menampilkan setiap nama kelas asli, pengganti pendeknya, jumlah kemunculan, dan total karakter yang dihemat. Salin tabel sebagai JSON untuk pipeline build Anda.
- Pratinjau Sebelum/Sesudah Langsung: lihat CSS teraburkan dan HTML teraburkan diperbarui secara real-time saat Anda mengedit input. Salin kode hasil transformasi dari salah satu keluaran dengan satu klik.
Apa Itu Pengaburan Nama Kelas CSS?
Pengaburan nama kelas CSS mengganti nama kelas deskriptif yang mudah dibaca di stylesheet dan markup Anda dengan nama pendek tanpa makna. Misalnya, .header-nav-item bisa menjadi .a, .card-body bisa menjadi .b, dan seterusnya. Alat otomatis menghasilkan nama terpendek yang mungkin dan menerapkan pemetaan secara konsisten pada CSS dan HTML Anda.
Cara Kerja Perpendekan Nama Kelas
Alat mengekstrak setiap nama kelas unik dari selektor CSS dan atribut class HTML Anda. Lalu alat menghasilkan tabel penggantian nama memakai nama terpendek yang tersedia — pertama karakter tunggal (a sampai z, A sampai Z, dan garis bawah), lalu karakter ganda (aa, ab, ..., _z), dan seterusnya. Setiap nama asli diganti secara konsisten di kedua file agar gaya Anda tetap berlaku dengan benar setelah pengaburan.
Manfaat Pengurangan Ukuran
Selain pengaburan, perpendekan nama kelas memberi penghematan bandwidth nyata. Kelas gaya BEM seperti .product-card__title--featured (31 karakter) yang menyusut menjadi .a (1 karakter) menghemat 30 karakter per kemunculan. Dengan puluhan kelas muncul ratusan kali di stylesheet besar, penghematan kumulatifnya bisa mencapai ribuan karakter di CSS maupun HTML.
Keterbatasan & Pertimbangan
Pengaburan nama kelas CSS paling baik bekerja bila Anda mengendalikan stylesheet dan markup sekaligus. Jika Anda memakai nama kelas dinamis yang dihasilkan JavaScript (misalnya penggabungan string atau template literal), alat tidak dapat melacak referensi tersebut dan akan dibiarkan apa adanya. Demikian pula, nama kelas yang dipakai di pustaka pihak ketiga atau inline di file JavaScript di luar input CSS/HTML tidak akan diganti nama. Alat mengecualikan pseudo-class CSS (:hover), pseudo-element (::before), dan at-rule (@media) agar tetap berfungsi.
Pertanyaan yang Sering Diajukan
Pengaburan nama kelas CSS mengganti nama kelas yang deskriptif dan semantik (seperti .header-nav-item atau .product-card__price) dengan nama pendek tanpa makna (seperti .a, .b, .c). Ini menyulitkan pesaing, scraper, dan alat otomatis memahami struktur halaman Anda dari HTML dan CSS. Ini juga mengurangi ukuran file karena nama panjang diganti dengan padanan satu atau dua karakter.
Ya, tetapi dengan catatan. Tailwind menghasilkan kelas utilitas seperti .flex, .text-center, dan .bg-blue-500 yang diterapkan langsung di HTML. Alat ini mendeteksi dan mengganti nama setiap nama kelas yang ditemukan di CSS maupun HTML Anda. Namun, jika Anda memakai direktif @apply Tailwind atau CSS kustom yang merujuk kelas utilitas, referensi tersebut juga akan diganti nama secara konsisten. Alat ini tidak bergantung framework — ia hanya menemukan nama kelas di selektor CSS dan atribut HTML Anda.
Ya, asalkan CSS dan HTML Anda diproses bersamaan. Alat menerapkan tabel penggantian nama yang sama ke kedua file, sehingga .card-body di CSS menjadi .b sama seperti class="card-body" di HTML menjadi class="b". Setiap kemunculan setiap nama kelas diganti secara konsisten. Satu-satunya pengecualian adalah nama kelas yang dirujuk secara dinamis di JavaScript (misalnya melalui penggabungan string), yang tidak dapat dideteksi alat ini.
Alat menghasilkan nama unik terpendek yang mungkin memakai strategi alokasi tertentu: pertama semua karakter tunggal (a-z, A-Z, garis bawah — 53 nama), lalu semua kombinasi dua karakter (aa, ab, ..., _z — 2.809 nama), dan akhirnya kombinasi tiga karakter bila perlu. Ini mencakup hingga ~790.000 nama kelas unik, jauh lebih banyak daripada yang mungkin dimuat stylesheet nyata. Urutannya deterministik — nama kelas pertama secara alfabet selalu mendapat «a», yang kedua «b», dan seterusnya.
Bisa. Tabel penggantian nama menampilkan setiap pemetaan asli-ke-pendek, dan Anda dapat menyalin seluruh tabel sebagai JSON memakai tombol salin. JSON ini dapat diintegrasikan ke pipeline build Anda — misalnya dengan plugin PostCSS atau loader webpack kustom — sehingga nama kelas diaburkan otomatis selama build produksi.
Alat ini bekerja pada CSS mentah dan teks HTML/JSX. Untuk CSS-in-JS (styled-components, Emotion, dll.), tempel isi template literal CSS langsung ke input CSS. Untuk CSS Modules, tempel CSS sumber dan JSX yang memakai nama kelas modul. Keluaran CSS/HTML kemudian dapat Anda adaptasi kembali ke framework pilihan. Tabel penggantian nama sangat berguna untuk konfigurasi CSS Modules.
Tentu. Pengabur Nama Kelas CSS berjalan 100 % di browser Anda. CSS, HTML, dan tabel yang dihasilkan tidak pernah meninggalkan perangkat Anda. Tidak ada analitik, panggilan API, pemrosesan sisi server, maupun penyimpanan data apa pun. Privasi Anda sepenuhnya terlindungi.
Ya — 100 % gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Aburkan stylesheet sebanyak yang Anda butuhkan, dengan nama kelas sebanyak yang Anda mau, sesering yang Anda inginkan. Tidak ada tingkat premium, biaya tersembunyi, atau batas laju — gratis selamanya.