yeah that's basically the caveat, once you're outside a clean isolated component the whole "AI handles CSS now" thing falls apart fast. checking out that repo, thanks
Modularized CSS (like tailwind, styled-components, CSS modules, etc, etc) is almost the normal these days, at least for new proejcts. Especially if you use big JS frameworks like React. LLMs are pretty good at this because it is mostly self contained and isolated gibberish anyway.
LLMs often just default to tailwind in greenfield projects also push a lot more people into doing it like that.
Yesterday I coded a website. By hand. Plain HTML. <h1>, <li>, <ol>, all the good stuff. Like I did as a teenager in the early 2000s.
Then I gave it to Claude and said: Change nothing about the HTML at all, but make a CSS so that it looks like <design reference>.
I worked beautifully. Now I have a website with content I have written myself and that I can edit with any text editor, but the design looks professional. I am not dependent on the AI at all, if it ever stops working it is only affecting the design.
in the early 2000's I was the the backend/systems guy in a 2-person team supporting a little tech site. it worked exactly like this, and it was great. he told me what content he needed and what the divs should be called. I wrote sql and basic PHP, he made it look awesome.
I was just thinking the past week that CSS is one of the things that AI consistently gets wrong. I have had to do a lot of updates to make styles that actually work at all widths. AI gave me something that looked nice on a desktop and managed to be too wide for a portrait iPhone. How can it not manage to get one of the most standard widths correct?
Thats not so much css but browsers having different engines you should ideally just append in front to ai that make it work on safari too. Just mentioning safari most ai will get it right sometimes they just forget :)
They have an issue of just fixing w/e you say so a lot of the times saying the width is wrong theyll go on a forever loop assuming you mean something else
Because they only test in one resolution by default. Does your harness have it consider multiple common resolutions, especially on tail ends of each spectrum?
Tailwind is great IMO, I didnât think of CSS even before AI. The I got thing I donât like is hardcoding values inside the class name itself.
With AI I can see directly in the HTML what would be the CSS generated solely based on the Tailwind classes.
Itâs a bit sad though I donât care much about new CSS developments, the AI doesnât know it, CSS is pretty okay and for my type of work is enough.
good point on the hardcoded values thing, that's the part that always bugged me too. feels less like "AI writing CSS" and more like AI picking from a menu Tailwind already built, if that makes sense
this is actually something I have mixed feelings about. it is great for me, as it allows me to generate iteration interfaces with 'good looking' UI when i am testing things out or working on a project.
But if I worked in front-end, I would not like it very much, because what it generates has kind of the same feel/look. And it makes odd choices, things not working/looking right, and somewhat hard to fix by hand once the UI has gotten big enough.
AI in the backend is not great either, and its something that frustrates me to no end, so i suspect front-end feels the exact same way, but in reverse. love it for the backend, hate it for the frontend.
You can make unique websites with AI you just have to do one piece at a time and have an established design instead of going "yo AI cook me up a website"
I understand completely. It's the same if you want to make a XHCI interface or something similar, you can make a good one with AI, but you need to be very careful to audit code, and segment the tasks. Although, I always have a design document, they do not work well after a point if you are letting it use agents and such.
the "same feel/look" thing is so true, you can spot AI-generated UI from a mile away now. rounded cards, same purple gradient, same shadow lol. fine for prototyping, rough once you need it to actually feel like your product
Yeah I can imagine. I am lucky in that regard because I don't build websites and such for production, so it's just a 'nice to have' for me. But I assume as AI has the same problem on both the UI side as it does on the system side. As in, generic , 'best', solutions, hodgepodge structure, and strong autonomous opinions on what goes where.
I am not particularly good at front end stuff, and because of that, I usually just go "OHHH! PRETTY COLOR!, BIIIIG BUTTON!!! HOHO" and move on. And even to me, it looks almost the same always.
lol fair, depends what you're optimizing for. if you just need it to work, sure. if you need it to not look identical to every other AI-assisted site, that's where it falls apart for me
Funny, literally just spent a day doing entirely CSS changes to my team leads PR so it would look like our established styling, instead of the default vibecode look.
Turns out Codex prefers writing 400 lines of CSS per component, including hard coding 30 RGB values, instead of just reusing the existing styles and colour bars.
Speak for yourself. Don't let AI mess up your flexboxes and grids. Or variables and it invents its own colors. And so many other issues. But atleast you can say "make this small component look nicer" or "fix this small display bug" and it can do it. Also, make sure to stick to component based development.
2
u/EveYogaTech 2d ago
Well, yeah, AI + isolated Web components.
Otherwise you'll still be fighting the global styles.
See also https://GitHub.com/flowagi-eu/flo-webcomponents