如何修改已发布站点CSS类名？Swiggy类名混淆技术问询

1. How to Modify CSS Class Names on a Published Site? #

The approach varies depending on whether you own the site or are making temporary changes for local viewing:

If it's your own published site: #

• Update source code: First, go through your HTML, CSS, and JavaScript files to replace old class names with your desired new ones. Make sure every reference—like elements using the class, CSS rules targeting it, or JS selecting it via querySelector—is updated to avoid broken styles or functionality.
• Test locally: Run your project locally to verify all styles still apply correctly and interactions work as expected.
• Rebuild (if using a build tool): If you use tools like Webpack, Vite, or Create React App, rebuild your project to generate updated bundled files.
• Deploy: Push the updated code to your hosting platform (e.g., Netlify, Vercel, AWS) to make changes live for all users.

If you're modifying someone else's site (like Swiggy) for personal use: #

Changes will only affect your browser and won't persist for other users:

• Use Chrome DevTools: Right-click the target element, select "Inspect" to open DevTools. In the Elements tab, edit the class attribute directly to change or add class names.
• Apply custom styles: To style your modified class, go to the Sources tab > Overrides, enable local overrides, create a custom CSS file with rules for your new class, and DevTools will apply these styles whenever you load the page.

2. How Does Swiggy Implement Class Name Obfuscation? #

Swiggy's short, unique class names come from CSS class minification and obfuscation—a standard practice in modern frontend development to optimize performance and deter reverse-engineering. Here's the breakdown:

What Technology is Used? #

Large frontend projects rely on build tools and plugins to automate this:

• CSS Modules: Tools like css-loader (for Webpack) or Vite's built-in CSS module support generate unique class names per component, preventing style conflicts.
• Minification Plugins: Tools like css-minimizer-webpack-plugin or terser-webpack-plugin shorten generated class names to tiny strings (like .nDVxx) to reduce file size.
• JS Bundlers: Frameworks like React use JS to render HTML, so bundlers ensure class name references in JS (e.g., className="restaurant-card") are replaced with obfuscated versions.

The关联逻辑 (Connection Logic): #

1. Development Phase: Developers use human-readable class names (e.g., .restaurant-card) in CSS, JSX, and JS.
2. Build Process: The build tool scans all files and creates an internal map linking original class names to short, unique obfuscated ones.
3. Replacement: Every instance of the original class name is swapped with the obfuscated version in the final HTML, CSS, and JS bundles.
4. Production Deployment: Bundled files with obfuscated names are deployed. When users load the site, the browser matches obfuscated class names in HTML to corresponding CSS rules, applying styles correctly.

The build tool ensures consistency across all files—so the obfuscated class in HTML exactly matches what's in CSS and any targeting JS. The original-to-obfuscated mapping is usually discarded in production to keep bundle sizes small.

内容的提问来源于stack exchange，提问作者gururaj