为何Patreon、Gmail等网站使用随机字符串作为HTML类名或ID？

Great question—I’ve definitely scratched my head over this too when digging into the code of those big websites. Let’s break down the key reasons they opt for this approach instead of semantic, function-based class names like you use:

• Block scraping & automated abuse
  Semantic class names (like .donate-button or .inbox-item) make it easy for scrapers, bots, or automation tools to target specific elements. Random strings throw a wrench in these tools’ workflows, making it harder to extract data, simulate user actions, or exploit site features maliciously. It’s a simple layer of defense against unwanted automation.

• Eliminate CSS naming conflicts
  In large teams or complex codebases (think hundreds of developers working on different modules), semantic names are bound to clash—two different components might both use .header or .card, leading to unintended style overrides. Random, unique class names eliminate this problem entirely, ensuring each element’s styles stay isolated to its intended context.

• Optimize for performance & file size
  Short random strings (like .x7y2z) are way more compact than descriptive names (like .user-settings-dropdown-menu). When you multiply that across thousands of elements in a big site, the savings in CSS/HTML file size add up—faster load times, less bandwidth usage, and better overall performance for end users.

• Hide internal implementation details
  Semantic class names can accidentally reveal how a site’s backend or frontend works (e.g., .checkout-step-3 gives away the flow of the payment process). Random names obscure these details, making it harder for outsiders to reverse-engineer the site’s structure or business logic.

• Work with modern CSS tooling
  Most large sites use CSS-in-JS libraries or modular CSS systems that automatically generate random class names. These tools enforce scoped styles, so styles from one component don’t leak into another. It’s a standard practice in modern frontend development for scaling complex applications.

To circle back to your approach: using function-based class names is totally valid (and often preferable!) for smaller projects or teams where readability and maintainability are top priorities. Big platforms just face unique challenges around scale, security, and performance that make random class names the more practical choice.

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