Обфускатор имён CSS-переменных

B

Размер исходного CSS

B

Размер обфусцированного CSS

0 ? 'text-amber-500' : 'text-green-500'}`}> %

Изменение размера

Пользовательские свойства CSS (--variable) не обнаружены. Убедитесь, что ваш CSS содержит объявления --custom-property: значение.

• Мгновенное переименование и защита CSS-переменных: наш обфускатор имён CSS-переменных мгновенно переименовывает все пользовательские свойства CSS в вашем коде. Вставьте CSS с понятными переменными вроде --primary-color и --text-color, и они заменятся короткими обфусцированными именами вроде --a и --b, при этом все ссылки var() по всей таблице стилей сохранятся автоматически.
• Двойная гарантия конфиденциальности: ваш CSS-код никогда не покидает браузер при использовании нашего обфускатора CSS-переменных. Всё переименование происходит локально — без загрузок на сервер, сбора данных и отслеживания. Архитектура вашей дизайн-системы и соглашения об именовании переменных остаются на 100% приватными на вашем устройстве.
• Без ограничений на размер файла: обфусцируйте большие CSS-файлы без ограничений. Наш бесплатный обфускатор имён CSS-переменных принимает входные данные любого размера — от небольших таблиц стилей компонентов до огромных файлов дизайн-систем. Идеально для корпоративных проектов и массовой защиты CSS.
• 100% бесплатно навсегда: пользуйтесь нашим обфускатором имён CSS-переменных совершенно бесплатно и без ограничений. Без регистрации, скрытых платежей, премиум-тарифов и рекламы — только неограниченная бесплатная обфускация CSS-переменных, когда она нужна. Лучший бесплатный обфускатор CSS-переменных в интернете.

• Защита CSS-дизайн-систем: авторы дизайн-систем используют обфускатор имён CSS-переменных, чтобы защитить соглашения об именовании токенов дизайна при распространении CSS-библиотек или компонентных фреймворков. Понятные имена переменных вроде --color-primary и --spacing-unit обфусцируются в короткие, что усложняет реверс-инжиниринг архитектуры дизайн-системы потребителями.
• Распространение сторонних CSS-библиотек: авторы CSS-библиотек используют обфускатор переменных перед публикацией пакетов в npm или CDN. Переименовав --theme-background в --a, они скрывают внутренние соглашения об именовании переменных библиотеки от потребителей, при этом CSS остаётся полностью рабочим благодаря автоматическому обновлению ссылок var().
• Обфускация фронтенд-фреймворков: разработчики фреймворков используют обфускатор имён CSS-переменных для защиты пользовательских свойств в библиотеках компонентов. Обфускация имён переменных предотвращает конфликты имён с таблицами стилей потребителей и усложняет случайное переопределение внутренних переменных фреймворка конечными пользователями.
• Распространение файлов тем: разработчики тем используют обфускатор CSS-переменных при распространении премиальных файлов тем. Имена переменных, раскрывающие структуру темы или систему наименования цветов, обфусцируются, что защищает интеллектуальную собственность дизайна темы при сохранении идентичного визуального результата.
• Продакшн-бандлы CSS-in-JS: разработчики, использующие решения CSS-in-JS (styled-components, Emotion), применяют обфускатор имён CSS-переменных к извлечённым CSS-бандлам для продакшн-развёртывания. Имена переменных сокращаются, чтобы уменьшить размер бандла и защитить внутренние соглашения об именовании от проверки в инструментах разработчика браузера.
• Изучение обфускации CSS-переменных: студенты и разработчики, изучающие техники обфускации CSS, используют обфускатор имён переменных, чтобы понять, как можно переименовывать пользовательские свойства, сохраняя полную функциональность. Таблица переименований показывает связь между исходными и обфусцированными именами.

Обфускация имён CSS-переменных — это процесс переименования пользовательских свойств CSS (также называемых CSS-переменными) из понятных, описательных имён в короткие, бессмысленные идентификаторы. Пользовательские свойства объявляются с двойным дефисом, например --primary-color: #3498db;, и используются через функцию var(), например color: var(--primary-color); . Наш обфускатор имён CSS-переменных автоматически находит все объявления и ссылки, заменяет их короткими именами ( --a , --b и т. д.) и показывает полную таблицу переименований — при этом CSS остаётся полностью рабочим.

1. 1. Вставьте CSS-код: вставьте в поле ввода CSS-код с пользовательскими свойствами. Инструмент автоматически сканирует все объявления --variable-name: и ссылки var(--variable-name). Нажмите «Загрузить пример CSS», чтобы попробовать на образце таблицы стилей с типичными переменными дизайн-системы.
2. 2. Нажмите «Обфусцировать CSS-переменные»: инструмент извлекает все уникальные имена переменных, определяет, сколько раз встречается каждое (объявления + ссылки), и генерирует короткие имена замены с использованием алфавита base-52. Более длинные имена заменяются первыми, чтобы избежать частичных совпадений. Каждая замена учитывает регистр и точно сохраняет структуру CSS.
3. 3. Проверьте соответствие и экспортируйте: обфусцированный CSS появляется в поле вывода вместе с полной таблицей соответствия имён переменных, где указаны исходное имя, обфусцированное имя, число вхождений и изменение длины. Скопируйте обфусцированный CSS в буфер обмена или скачайте его как готовый к распространению файл .css.

• Поиск объявлений: инструмент находит все шаблоны объявлений --name: value; в CSS. Они обнаруживаются с помощью шаблона /--([a-zA-Z][\w-]*)\s*:/g , который захватывает стандартные имена пользовательских свойств CSS, включая дефисы и подчёркивания.
• Поиск ссылок: все вызовы функции var(--name) обнаруживаются отдельным шаблоном регулярного выражения. Ссылки объединяются с объявлениями для построения полного списка уникальных переменных, что гарантирует переименование и тех переменных, которые используются через var() без явных объявлений.
• Генерация коротких имён: имена замены генерируются с помощью алфавита base-52 (a-z, A-Z): сначала односимвольные имена ( --a , --b ), затем двухсимвольные ( --aa , --ab ). Это минимизирует размер выходного CSS и позволяет избежать конфликтов имён.
• Безопасная замена: чтобы избежать частичных замен (например, переименования --primary внутри --primary-dark ), более длинные имена заменяются первыми. Число вхождений каждой переменной отслеживается отдельно для таблицы соответствия.

Обфускатор имён CSS-переменных на 100% бесплатен и не требует регистрации . Вся обработка происходит локально в вашем браузере — ваш CSS-код никогда не покидает устройство. Нет ограничений на размер файла или объём использования. Обратите внимание: этот инструмент переименовывает пользовательские свойства CSS только внутри CSS-кода. Если вы используете CSS-переменные в HTML (через встроенные стили) или JavaScript (через style.setProperty() ), эти ссылки нужно обновлять отдельно. Переименование нельзя отменить, имея только обфусцированный результат, — всегда сохраняйте резервную копию исходного CSS. Для максимальной защиты сочетайте его с другими техниками обфускации, такими как минификация и обфускация имён классов.