Obfuscateur de noms de classes CSS
Raccourcissez les noms de classes CSS en noms d'un ou deux caractères pour obscurcir vos feuilles de style. Collez votre CSS et le HTML correspondant, obtenez une table de renommage avec aperçus avant/après pour le CSS et le HTML, et copiez le code transformé - le tout gratuit et privé, sans inscription.
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.
Fonctionnalités
- Double entrée (CSS + HTML) : collez à la fois votre feuille de style et votre balisage HTML. L'outil croise les deux pour faire en sorte que chaque nom de classe utilisé dans le HTML ait un renommage correspondant, et les classes du CSS non référencées sont elles aussi raccourcies.
- Noms les plus courts possibles : les noms de classes sont raccourcis aux plus petits noms d'un caractère (a-z, A-Z, _), puis aux noms de deux caractères (aa, ab, etc.), ce qui garde votre sortie aussi compacte que possible.
- Table de renommage complète : un tableau coloré affiche chaque nom de classe d'origine, son remplacement court, le nombre d'occurrences et le total de caractères économisés. Copiez la table en JSON pour votre pipeline de build.
- Aperçus avant/après en direct : voyez le CSS obfusqué et le HTML obfusqué se mettre à jour en temps réel pendant que vous modifiez l'entrée. Copiez le code transformé de l'une ou l'autre sortie en un clic.
Qu'est-ce que l'obfuscation de noms de classes CSS ?
L'obfuscation de noms de classes CSS remplace les noms de classes descriptifs et lisibles de vos feuilles de style et de votre balisage par des noms courts et sans signification. Par exemple, .header-nav-item peut devenir .a, .card-body peut devenir .b, et ainsi de suite. L'outil génère automatiquement les noms les plus courts possibles et applique la table de façon cohérente sur votre CSS et votre HTML.
Comment fonctionne le raccourcissement des noms de classes
L'outil extrait chaque nom de classe unique de vos sélecteurs CSS et de vos attributs class HTML. Il génère ensuite une table de renommage à partir des noms les plus courts disponibles - d'abord les caractères simples (de a à z, de A à Z et le tiret bas), puis les caractères doubles (aa, ab, ..., _z), et ainsi de suite. Chaque nom d'origine est remplacé de façon cohérente dans les deux fichiers pour que vos styles continuent de s'appliquer correctement après l'obfuscation.
Avantages en termes de réduction de taille
Au-delà de l'obfuscation, le raccourcissement des noms de classes apporte de vraies économies de bande passante. Une classe de style BEM comme .product-card__title--featured (31 caractères) réduite à .a (1 caractère) économise 30 caractères par occurrence. Avec des dizaines de classes apparaissant des centaines de fois dans une grande feuille de style, les économies cumulées peuvent atteindre des milliers de caractères dans le CSS comme dans le HTML.
Limites et considérations
L'obfuscation de noms de classes CSS fonctionne mieux lorsque vous contrôlez à la fois la feuille de style et le balisage. Si vous utilisez des noms de classes dynamiques générés par JavaScript (par exemple par concaténation de chaînes ou littéraux de gabarit), l'outil ne peut pas suivre ces références et elles seront laissées telles quelles. De même, les noms de classes utilisés dans des bibliothèques tierces ou en ligne dans des fichiers JavaScript en dehors des entrées CSS/HTML ne seront pas renommés. L'outil exclut les pseudo-classes CSS (:hover), les pseudo-éléments (::before) et les règles at (@media) pour qu'ils restent fonctionnels.
Foire aux questions
L'obfuscation de noms de classes CSS remplace des noms descriptifs et sémantiques (comme .header-nav-item ou .product-card__price) par des noms courts et sans signification (comme .a, .b, .c). Il devient ainsi plus difficile pour les concurrents, les scrapers et les outils automatisés de comprendre la structure de votre page à partir du HTML et du CSS. Cela réduit aussi la taille des fichiers, puisque les noms longs sont remplacés par des équivalents d'un ou deux caractères.
Oui, avec quelques réserves. Tailwind génère des classes utilitaires comme .flex, .text-center et .bg-blue-500 appliquées directement dans le HTML. Cet outil détecte et renomme tout nom de classe trouvé dans votre CSS comme dans votre HTML. Toutefois, si vous utilisez la directive @apply de Tailwind ou du CSS personnalisé qui référence des classes utilitaires, ces références seront aussi renommées de façon cohérente. L'outil est indépendant du framework : il trouve simplement les noms de classes dans vos sélecteurs CSS et vos attributs HTML.
Oui, à condition de traiter ensemble votre CSS et votre HTML. L'outil applique la même table de renommage aux deux fichiers : .card-body dans votre CSS devient .b de la même façon que class="card-body" dans votre HTML devient class="b". Chaque occurrence de chaque nom de classe est remplacée de façon cohérente. Les seules exceptions sont les noms de classes référencés dynamiquement en JavaScript (par exemple par concaténation de chaînes), que cet outil ne peut pas détecter.
L'outil génère les noms uniques les plus courts possibles selon une stratégie d'allocation précise : d'abord tous les caractères simples (a-z, A-Z, tiret bas - 53 noms), puis toutes les combinaisons de deux caractères (aa, ab, ..., _z - 2 809 noms), et enfin des combinaisons de trois caractères si nécessaire. Cela couvre jusqu'à ~790 000 noms de classes uniques, bien plus que n'en contiendrait une vraie feuille de style. L'ordre est déterministe : le premier nom de classe par ordre alphabétique reçoit toujours « a », le deuxième « b », etc.
Oui. La table de renommage affiche chaque correspondance original-vers-court, et vous pouvez copier l'intégralité de la table en JSON avec le bouton de copie. Ce JSON peut être intégré à votre pipeline de build - par exemple avec un plugin PostCSS ou un loader webpack personnalisé - pour que les noms de classes soient obfusqués automatiquement lors du build de production.
L'outil travaille sur du CSS brut et du texte HTML/JSX. Pour le CSS-in-JS (styled-components, Emotion, etc.), collez le contenu du littéral de gabarit CSS directement dans l'entrée CSS. Pour les CSS Modules, collez le CSS source et le JSX qui utilise les noms de classes du module. Vous pourrez ensuite réadapter le CSS/HTML de sortie dans le framework de votre choix. La table de renommage est particulièrement utile pour la configuration des CSS Modules.
Absolument. L'obfuscateur de noms de classes CSS s'exécute à 100 % dans votre navigateur. Votre CSS, votre HTML et les tables générées ne quittent jamais votre appareil. Il n'y a aucune analyse, aucun appel d'API, aucun traitement côté serveur et aucun stockage de données. Votre vie privée est totalement protégée.
Oui - 100 % gratuit, sans inscription, sans compte et sans limite d'utilisation. Obfusquez autant de feuilles de style que nécessaire, avec autant de noms de classes que vous voulez, autant de fois que vous voulez. Aucun niveau premium, aucun frais caché, aucune limite de débit - gratuit à vie.