its not webstudio, we just show you what browser has as a default
in the end when you have a design system you can reset everything you need on your semantic tokens
From what I can tell, Webstudio doesn't have a system to style default elements, but
planned to make one?
Bogdan
had a good point here and I'm sure I don't know better. But I would like to drag in an h3 or image element and have it be automatically styled according to my design system, with the option to remove that default styling when needed.
Yeah, I am not sure. In the world with design systems this is unnecessary.
With a design system you never use plain tags without tokens or components
My gut feeling is no class is better than atomic classes
I am not sure what atomic classes have to do with the question tbh
From what I know normally you build your design system first, then you want it to apply to your reusable instances.
I think what you actually want is components, so you don't have to add a token every time
you create your Heading components and then apply to it the tokens you want and then use that component
the annoying part right now is that we don't have components you can create yet, so you are forced to add a token
In Webflow I would style the default html tags (e.g. all h3 headings) on a style guide page to reduce classes needed. In Webstudio I have to add a token for each instance, adding atomic CSS every time.
Yeah, even in webflow you could use your design system and reuse your componets without using tag styles
I am not sure what you mean by atomic css, I feel like you are using this term randomly, tokens are not necessarily atomic, in fact with Craft style guide we don't recommend atomic
atomic is when a class or a token has only one property defined
this is what I'm talking about. Technically if there were no classes added, wouldn't it be faster?
these are optimized classes webstudio generates, not you
if performance is your concern forget about it
the way we generate css is very fast and scales infinitely
same principle behind tailwind
Are you saying there's only a negligible performance impact styling element selectors once, compared to adding classes for each style for each element?
no, I am saying we are boosting your performance by a huge factor and that factor grows if your site gets bigger
regular classes slow down your site as it grows, css with atomic classes at some point stops growing basically
this is a well researched topic, you can find content about it everywhere
Got it. Maybe I just have PTSD from the combo classes and clogged DOM with Finsweet's Client-First
lol I bet you do, wf combo classes is a disaster on top of which client-first was built to manage the disaster
I would love to invest more time into making finsweet's stuff more seamlessly working in webstudio, but as soon as I see the mess, I just get sad.
We made a craft base components library, its in the marketplace, obviously a small selection but its well made
For brevity's sake, are you saying the extra html from tokens (top line) compared to default styled element selectors (bottom line) doesn't matter?
in the grand schema of things it doesn't matter, yes
it increases the document payload, but not significantly enough to have a performance implication
performance with css has a very different problem that's 100x bigger than this
Got it, thanks! I'm sure other users and even some clients would love to understand this better, maybe in the documentation or an article
