Обфускатор имён CSS-классов
Укорачивайте имена CSS-классов до одно- и двухсимвольных, чтобы запутать свои таблицы стилей. Вставьте CSS и соответствующий HTML, получите таблицу переименования с предпросмотром до/после для CSS и HTML и скопируйте преобразованный код - всё бесплатно и приватно, без регистрации.
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.
Возможности
- Двойной ввод (CSS + HTML): вставьте и таблицу стилей, и HTML-разметку. Инструмент сопоставляет их, чтобы у каждого имени класса из HTML было соответствующее переименование, а классы из CSS без ссылок тоже укорачиваются.
- Максимально короткие имена: имена классов сокращаются до минимальных односимвольных (a-z, A-Z, _), затем до двухсимвольных (aa, ab и т. д.), чтобы ваш результат был максимально компактным.
- Полная таблица переименования: таблица с цветовой кодировкой показывает каждое исходное имя класса, его короткую замену, число вхождений и общее число сэкономленных символов. Копируйте таблицу в JSON для процесса сборки.
- Живой предпросмотр до/после: смотрите, как обфусцированные CSS и HTML обновляются в реальном времени по мере правки ввода. Копируйте преобразованный код любого из результатов одним кликом.
Что такое обфускация имён CSS-классов?
Обфускация имён CSS-классов заменяет описательные, читаемые имена классов в таблицах стилей и разметке короткими бессмысленными именами. Например, .header-nav-item может превратиться в .a, .card-body - в .b и так далее. Инструмент автоматически генерирует максимально короткие имена и согласованно применяет соответствия и к CSS, и к HTML.
Как работает укорочение имён классов
Инструмент извлекает каждое уникальное имя класса из ваших CSS-селекторов и HTML-атрибутов class. Затем он генерирует таблицу переименования из самых коротких доступных имён: сначала односимвольные (от a до z, от A до Z и нижнее подчёркивание), затем двухсимвольные (aa, ab, ..., _z) и так далее. Каждое исходное имя согласованно заменяется в обоих файлах, чтобы стили продолжали применяться корректно после обфускации.
Преимущества уменьшения размера
Помимо обфускации, укорочение имён классов даёт реальную экономию трафика. Класс в стиле BEM вроде .product-card__title--featured (31 символ), сжимающийся до .a (1 символ), экономит 30 символов на каждое вхождение. Когда десятки классов встречаются сотни раз в большой таблице стилей, суммарная экономия может достигать тысяч символов и в CSS, и в HTML.
Ограничения и нюансы
Обфускация имён CSS-классов работает лучше всего, когда вы контролируете и таблицу стилей, и разметку. Если вы используете динамические имена классов, создаваемые JavaScript (например, конкатенацией строк или шаблонными литералами), инструмент не сможет отследить такие ссылки, и они останутся без изменений. Точно так же не будут переименованы имена классов в сторонних библиотеках или инлайн в JavaScript-файлах вне входных CSS/HTML. Инструмент исключает CSS-псевдоклассы (:hover), псевдоэлементы (::before) и at-правила (@media), чтобы они продолжали работать.
Часто задаваемые вопросы
Обфускация имён CSS-классов заменяет описательные, семантические имена классов (например, .header-nav-item или .product-card__price) короткими бессмысленными именами (например, .a, .b, .c). Это усложняет конкурентам, парсерам и автоматизированным инструментам понимание структуры вашей страницы по HTML и CSS. Кроме того, это уменьшает размер файлов, поскольку длинные имена классов заменяются одно- или двухсимвольными эквивалентами.
Да, но с оговорками. Tailwind генерирует утилитарные классы вроде .flex, .text-center и .bg-blue-500, применяемые прямо в HTML. Этот инструмент находит и переименовывает любые имена классов как в CSS, так и в HTML. Однако если вы используете директиву @apply из Tailwind или собственный CSS, ссылающийся на утилитарные классы, эти ссылки тоже будут переименованы согласованно. Инструмент не зависит от фреймворка - он просто находит имена классов в ваших CSS-селекторах и HTML-атрибутах.
Да, если обрабатывать CSS и HTML вместе. Инструмент применяет одну и ту же таблицу переименования к обоим файлам, поэтому .card-body в CSS становится .b так же, как class="card-body" в HTML становится class="b". Каждое вхождение каждого имени класса заменяется согласованно. Единственные исключения - имена классов, на которые динамически ссылаются в JavaScript (например, через конкатенацию строк), - этот инструмент их не распознаёт.
Инструмент создаёт максимально короткие уникальные имена по определённой стратегии распределения: сначала все односимвольные (a-z, A-Z, нижнее подчёркивание - 53 имени), затем все двухсимвольные комбинации (aa, ab, ..., _z - 2 809 имён) и, наконец, при необходимости трёхсимвольные. Это покрывает до ~790 000 уникальных имён классов - гораздо больше, чем может содержать реальная таблица стилей. Порядок детерминированный: первое имя класса по алфавиту всегда получает «a», второе - «b» и так далее.
Да. Таблица переименования показывает каждое соответствие «оригинал - короткое имя», а полную таблицу можно скопировать в формате JSON кнопкой копирования. Этот JSON можно встроить в ваш процесс сборки - например, в плагин PostCSS или собственный загрузчик webpack, - чтобы имена классов обфусцировались автоматически при продакшен-сборке.
Инструмент работает с обычным CSS и текстом HTML/JSX. Для CSS-in-JS (styled-components, Emotion и др.) вставьте содержимое шаблонного литерала CSS прямо в поле ввода CSS. Для CSS Modules вставьте исходный CSS и JSX, использующий имена классов модуля. Затем выходной CSS/HTML можно адаптировать обратно под нужный фреймворк. Таблица переименования особенно полезна при настройке CSS Modules.
Безусловно. Обфускатор имён CSS-классов работает на 100 % в вашем браузере. Ваш CSS, HTML и сгенерированные таблицы никогда не покидают устройство. Здесь нет аналитики, вызовов API, серверной обработки и хранения данных любого рода. Ваша приватность полностью защищена.
Да - на 100 % бесплатно, без регистрации, без аккаунта и без ограничений по использованию. Обфусцируйте столько таблиц стилей, сколько нужно, с любым числом имён классов и сколько угодно раз. Без премиум-уровней, скрытых платежей и ограничений по скорости - бесплатно навсегда.