Webstudio

Log inLog into community

Join the Webstudio community

Updated 3 months ago

Sync the name of components with token class

Sync the name of components with token class

At a glance

The post expresses difficulty in scaling a project due to the need to create a div, name a custom token, and then rename it in the layers, even when the names are often the same. The comments discuss various approaches to managing instances and tokens, with community members suggesting that instance names and token names serve different purposes, and that a semantic approach with CSS variables may be preferable. Some community members express a preference for a more traditional CSS approach over a Tailwind-like system, while others see the benefits of the faster development workflow. The comments also discuss the use of classes for animation and how they relate to instances and tokens.

·

I find it very hard to scale a project. Having to create a div then naming a custom token, then renaming it in the layers, a lot of the times it uses the same name anyways.

O

d

B

21 comments

What if you have a semantic name like Avatar and use multiple utility tokens to style it?

Naming instance doesn't automatically mean it needs a reusable token

Tokens are specifically designed to be reusable, otherwise a one-off doesn't need a token at all

Sounds very similar to tailwind. I personally am not a huge fan of working this way, since code becomes much harder to navigate in the production site, but it is much faster to develop, so I understand the need for this system.

So if you have a complex section styling you would use the Local instance for styling?

Also I tend to be in the minority of people who don't prefer tailwind, so I think following that approach is actually more benefitial for most devs anyway.

You can use only local styles without tokens if you feel comfortable with such approach.
In the future we will add nocode components support. So you could reuse parts without copy/paste.

I don't advocate for one approch or another

I am just saying that instance name is not token name, they serve different purposes

With css variables that we are going to add soon, semantic approach will be prefferable

but even then You may want to have different names on the instance and token

Instance naming is about specific meaning in the tree where its being used, token naming is a reusable meaning across all usages

E.g. My Red Very Important Button could be instance name, while token Could be just Button or "Primary Button" or "button" "button-primary"

You seem to be coming with webflow mindset I have a feeling.

Definitely a webflow mindset.

Another question: I tend to use classes as a way to animate using GSAP, for example:

Go through all elements with class of .sticker-image

And make the very top one have the highest z index than the ones on bottom.

If I do something like this, would i work with token name or instance name?

class name

you can still add classes to an instance

in settings

Oh okay, so if I set the class name and then change the styling, would it apply to the class name I have selected, or is that more of an Identified?

no, class name is just an attribute/property

we don't use your classes for css we generate

Add a reply

Sign up and join the conversation on Discord