Leaderboard

@da² There's an official Twig-2-Latte converter that's really useful if you aim to compare both engines side-by-side. You can try it out online as well.

Figma generated code doesn't really feel like it was intended to be exported and used as-is, especially for large chunks like that. I do find it pretty good for other use case, though; for an example you can quickly glance over the values instead of finding them from different inputs all over the GUI. And I'll admit that I've copied a shadow or gradient every once in a while as-is from Figma ? I'm looking at one project right now, and for color theme it is actually using CSS variables, which takes care of some duplication. I don't know why it's not doing the same for font families, though. And seems to me like it should be able to create a separate element (class) for each text style and then refer to those somehow ? Apart from native Figma tools, Anima (Figma plugin) seems decent. I've not used it for real projects myself and probably won't for the foreseeable future, but I did a quick test with it some time ago and it seemed... relatively good. And it's a nice touch that it can export React/Vue components.

I get that the gist of this thread is "WP bad", but to be fair I've ran relatively often into the opposite issue in ProcessWire: an image or file that should've been uploaded once and then reused is instead uploaded to a whole bunch of separate pages, using loads of unnecessary disk space. ProcessWire doesn't by itself create a lot of unnecessary variations, but it is not uncommon occurrence either: years of code changes combined with badly configured image fields (no limit for image dimensions) can lead to major disk bloat. Worse yet is when someone decides that a file/image that is separately uploaded all around the place now needs to be updated everywhere. Oh the joy! Long story short: there are cases for and against both central media/asset management and page based media/asset management, neither are perfect. Now what is indeed suboptimal is the way WordPress handles variations: they need to be globally registered, are created on upload (whether you need them or not), and won't be (re)created automatically if registered or changed later. This can absolutely lead to unnecessary disk usage, and on the other hand means that you may not have the variation you were looking for available, or it may not be what you expected it to be. But again, each approach/architecture has upsides and downsides ? -- By the way, I'm not generally against bashing [insert a CMS or any other product here] or venting frustrations about it, but I do think we should try to be fair. WP gets a lot of bad rep for a good reason, there are definitely issues and shortcomings, but it also gets blamed for legacy/aging custom (site/theme specific) code, overuse of third party plugins, outdated third party plugins, etc. None of these are core issues, and it's not really fair to blame them on WP ?

On my previous project, a designer created a template on https://www.figma.com/. You can export design to CSS, I add a look at this code and it's a terrible thing. ? For example, this simple box... ...generates this mess: /* Frame 232 */ position: absolute; width: 460px; height: 580px; left: 490px; top: 425px; /* Ombre */ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); /* Offre Gratuite */ position: absolute; width: 460px; height: 580px; left: 0px; top: 0px; /* Ombre */ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); /* Rectangle 6 */ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; /* Blanc */ background: #FFFFFF; border-radius: 10px; /* Pour accéder à notre outil, veuillez vous identifier */ position: absolute; height: 171px; left: 108px; right: 108px; top: 86px; /* Desktop - Texte courant */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 21px; display: flex; align-items: center; text-align: center; /* Bleu foncé */ color: #02171C; /* Titre */ position: absolute; height: 86px; left: 0px; right: 0px; top: 0px; /* Rouge */ background: #E74342; border-radius: 10px 10px 0px 0px; /* J’ai déjà un compte */ position: absolute; height: 26px; left: 0px; right: 0px; top: 30px; /* Desktop - Mise en exergue */ font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 22px; line-height: 26px; /* identical to box height */ display: flex; align-items: center; text-align: center; /* Blanc */ color: #FFFFFF; /* Bouton */ position: absolute; height: 55px; left: 0px; right: 0px; top: 485px; /* Frame 3 */ /* Auto layout */ display: flex; flex-direction: row; align-items: flex-start; padding: 15px 23px; gap: 10px; position: absolute; left: 23.48%; right: 23.48%; top: 0%; bottom: 0%; /* Rouge */ background: #E74342; border-radius: 30px; /* Se connecter */ width: 198px; height: 25px; font-family: 'Gilroy-Bold'; font-size: 20px; line-height: 23px; display: flex; align-items: center; text-align: center; /* Blanc */ color: #FFFFFF; /* Inside auto layout */ flex: none; order: 0; flex-grow: 0; /* Group 202 */ position: absolute; width: 380px; height: 85px; left: 40px; top: 230px; /* Identifiant * */ position: absolute; width: 380px; height: 30px; left: 40px; top: 230px; /* Desktop - Texte courant bold */ font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 18px; line-height: 21px; /* Bleu foncé */ color: #02171C; /* Frame 3 */ box-sizing: border-box; position: absolute; height: 55px; left: 8.7%; right: 8.7%; top: 260px; /* Blanc */ background: #FFFFFF; /* Gris */ border: 1px solid #5E7F8C; border-radius: 30px; /* Votre identifiant */ position: absolute; height: 21px; left: 30px; right: 59px; top: 17px; /* Desktop - Texte courant */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 21px; /* identical to box height */ display: flex; align-items: center; /* Gris */ color: #5E7F8C; /* Group 203 */ position: absolute; width: 380px; height: 85px; left: 40px; top: 335px; /* Mot de passe * */ position: absolute; width: 380px; height: 30px; left: 40px; top: 335px; /* Desktop - Texte courant bold */ font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 18px; line-height: 21px; /* Bleu foncé */ color: #02171C; /* Frame 3 */ box-sizing: border-box; position: absolute; height: 55px; left: 8.7%; right: 8.7%; top: 365px; /* Blanc */ background: #FFFFFF; /* Gris */ border: 1px solid #5E7F8C; border-radius: 30px; /* Votre identifiant */ position: absolute; height: 21px; left: 30px; right: 59px; top: 17px; /* Desktop - Texte courant */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 21px; /* identical to box height */ display: flex; align-items: center; /* Gris */ color: #5E7F8C; /* Mot de passe oublié ? */ position: absolute; width: 380px; height: 30px; left: 40px; top: 440px; /* Desktop - Texte courant bold */ font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 18px; line-height: 21px; /* Rouge */ color: #E74342; Everything is absolute, font-family and other attributes are duplicated everywhere... There's almost nothing to keep in the final code. I wouldn't trust an AI generated code, and when you need to make changes you first have to learn what the AI created and to adapt to it, not my taste. I prefer to have full control on this and know what I'm doing.