I’m brand-new to Penpot, and really really stoked about the ability to write clean HTML/CSS using this Figma-like design interface.
The first thing I was struck by however was the fact that every single element is tagged with a number of classNames, and that the name the user gives to an element in the UI gets appended with a hyphen and an arbitrary hash .
That’s going to make for some messy CSS code, making it harder for a human to parse it and maintain it in the future.
I understand that there’s a need to keep individual classNames unique since we’re not using IDs to select items in the CSS, but if the user is very careful to use unique names for each item, shouldn’t Penpot be able to recognize that the item’s name is unique and therefore not use the hash?
At any rate, I am asking any Web Devs in the Community to share their thoughts / best practices. Do you spend a lot of time cleaning up the classNames in the generated CSS? If so, do you use RegEx for that? And how do you maintain synch with the Penpot source in case the designer makes changes?
2 Likes
Hello @TomAuger!
I don’t like how Penpot handles de code output right now, it’s kinda messy so I prefer not to mess with blindly copying what Penpot gives me. My approach is to copy the properties from the CSS and rebuild everything the way I feel is the best code, using the orientation Penpot gives from flex-layout and other useful stuff.
I feel that in the future the code given by Penpot will be much easier to read and maintain and well-polished. Maybe with some sort of VScode extension or something like that. Maybe someone will make a plugin that helps with that too. There’s a lot of possibilities for that.
1 Like
Well that is a bit disappointing I guess. For smaller apps, I suppose copy-and-paste isn’t a problem, but I agree that for more complex apps, the code isn’t clean.
It kind of reminds me of Dreamweaver code generation - is anyone else old enough to remember that hot mess?
It kind of reminds me of Dreamweaver code generation - is anyone else old enough to remember that hot mess?
Hahahah, oh no that really was bad.
There’s a thread here for suggestions on enhancing the developer experience. I’m currently compiling my own little list with my personal preferences for working with semantic HTML, CSS variables, etc, and how those could work with Penpot. It’d be great to hear more about what your ideal code output would look like!
For example, I think the CSS could be greatly improved if we could get image assets as a separate download option so they didn’t need to be base64 encoded, and if components, colors, and typographies were set as CSS variables and class-based rules to reduce repetition and improve maintainability.
