Join the Webstudio community

Updated 2 months ago

Structuring your webstudio project

At a glance

The community members discuss structuring a new Webstudio project. They suggest that the Finsweet Client-First methodology is not necessary, as Webstudio's design token system provides a simpler approach. The key points are:

- Custom classes and Combo classes are not needed, as elements can be styled directly using local styles and composable tokens.

- Utility tokens are recommended, as they provide reusable functional styles.

- Semantic tokens can be used to name styles based on their context.

- The community members suggest creating a "Token Naming Methodologies" page in the Webstudio documentation to compare different approaches and explain the token system.

Useful resources
Once you start building a new Webstudio project, how are you structuring your project?

Do you use something like Finsweet Client-First methodology, something else?
O
d
15 comments
most of client-first methodology is basically a workaround for css classes and in particular how webflow uses them, so most of it won't be needed
Custom class - a one-off for a specific element, not needed, as you can style everything directly on Local style without naming anything at all.
Combo - not needed, as it solves the problem with webflow combo classes, tokens are simply composable, you can use multiple of them on one element
Utility - yes, you can create utility tokens, that's what we do most of the time.
Global - tokens are always global, available on every page, so the semantics of "Global" category here is kinda pointless.
There are effectively 2 kinds of tokens: semantic and utility
semantic would be when you want to name something based on how its used in a specific context, utility - a more reusable functional naming, can be reused everywhere
its a much simpler system overall
The more granular utilities you make, the more composable they get.
E.g. you could use tailwind-style atomic utilities, which define one property at a time
In that case its literally the same as using tailwind
We built webstudio.is using tailwind-style atomic tokens
cc @Alex we need to add a page to the docs that specifically compares a few popular naming methodologies and explains tokens from that lens.

This question is going to come up all the time and we really need a good write up to link to πŸ™
what we need is a "Token Naming Methodologies"
yes that would be great!
Add a reply
Sign up and join the conversation on Discord