I've been exploring AI tools that generate HTML and CSS from prompts, such as Framer and Readdy. I've noticed that the class names they produce can appear random and don't seem to follow any consistent naming conventions like BEM. When I inspect the generated pages, I often see inline styles and strange class names, such as css-1h3j2. Is there a specific reason for this, or is it just the result of the AI's output?
5 Answers
The quirky class names are often a result of CSS modules compilation. They convert class names to unique, random characters to avoid conflicts across the project. It's more about maintaining uniqueness than readability.
From what I've seen, many AI builders adopt some form of atomic CSS approach or generate unique class names to prevent style conflicts. The random-looking names like css-1h3j2 usually serve as hashed identifiers to keep styles contained. For instance, Framer uses a system that's not really designed for manual editing, favoring quick output over clean code because most users won't tweak the CSS themselves. Inline styles might happen when the AI can't find reusable patterns or needs to make specific adjustments.
The output is heavily influenced by the prompt. If you leave things vague, the AI will whip up whatever it feels is quickest. If you provide a clear style guide, it can follow that more closely.
I've been using Tailwind for my projects when working with language models, and I find it helps with consistency and readability.
It might just be that the AI obfuscates its code, as many page builders do that these days. Or honestly, some of it is just poorly generated code. If you're looking for more structure, you could try tools based on Tailwind.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads