Support for combinator styling as well as attribute based / ClassName styling
Support for combinator styling as well as attribute based / ClassName styling
At a glance
The post discusses the limitations of using tokens for styling in the visual editor, such as the inability to apply specific classes like .is-active or .is-current, style based on attributes, or use combinator styling. The community members suggest that these use cases can be solved more elegantly using CSS variables, where a state is set on the container and variables are used on the same element or its children. The goal is to prevent relying on cascade and combo classes, which can lead to specificity issues. While some community members believe that all use cases will be covered with variables, others note that not everything needs to be doable through the builder UI, and custom code can still be used for advanced styling.
Using tokens is super powerful for styling but it comes with its limitations as the team might already know.
There are scenarios where we'd want to apply specific classes for things like .is-active or .is-current and have specific styles associated with them. Even things like styling based on attributes are currently not possible through the visual editor. The way it has to be done is through an HTML embed block. The downside of this is we lose the powerful visual building capabilities that come with Webstudio.
Secondly, ability to target using combinator styling is not possible. It is not possible currently to do things like targeting child element in case like .parent:hover .child. There are also styling for descendant, sibling, etc. isn't possible currently through the visual editor.
It would be great if some of these would be possible to do through the visual editor.
Combo classes are evil because of source order specificity issues. We are going to solve all these use cases by using css variables much more elegantly.
