Join the Webstudio community

Updated 4 months ago

Defining CSS classes programmatically

At a glance

The post asks if it's possible to define CSS classes via code, specifically to have one class name that does two different things depending on whether it's on a Button or a Link. The community members discuss various approaches, such as adding classes through the Settings, using nested classes, and leveraging Webstudio's features to handle specificity issues. They also mention that a lot of this information is documented, and provide a couple of video references to help with understanding Tokens and Local. However, there is no explicitly marked answer to the original question.

Useful resources
Is it possible to define CSS classes via code? The main reason I ask is because I want to have one class name that does 2 different things depending on if it's on a Button or a Link
J
h
14 comments
I don't follow the use case but you can add classes by going to Settings on any instance
what's the different between a 'class' and a 'style source'?
A lot of this is documented πŸ™‚
sorry :( im bad at finding docs haha
What did you search for so i know how to optimize it?
oh no don't worry about it it's my fault
what I mean is something like this, nested classes. is there a way to do that with tokens?

Plain Text
.section.fullWidthImage {
  padding-bottom: 0px;
  padding-top: 0px;
  img {
    width: 100%;
  }
}
Why do you want to? Webstudio fixes specificity issues and css depending on an exact HTML structure
In this case why not just add width 100 to the img using Local?
Maybe this is something a Component Editor could do too if you want to have a defined section like this with expecations of what goes inside and the design
eh im probably just using webstudio wrong, I'll keep fiddling and find a better way to do it :)
this is the best web editor I've ever used
Add a reply
Sign up and join the conversation on Discord