The community member is looking for a way to use custom CSS classes instead of tokens, as the current setup in the web studio generates a separate CSS class for every style, which they find cumbersome. They are interested in using semantic CSS classes and utility classes with variables, and wonder if there is a way to turn off the automatic generation of CSS classes. The comments suggest exploring the atomic CSS setting, using mixins instead of tokens, and following the BEM (Block, Element, Modifier) methodology for building out CSS.
Have been looking throughout here and online to see how we can use custom classes in place of tokens.
So on the front end tokens are great, they act really similar to css utility classes. However when you go to the developer it outputs one class for every style. I read that this was the automatic code behind the scenes within web studio.
The same thing I noticed when I enter in the advanced css “Border-radius : 30px”
Instead of the short hand it takes that and creates all the side variations- left, top, bottom, right.
So a few questions is there a way to turn all of this off and use semantic css classes and utility classes with vars?
Or why does it do this? Front end it get it. The developer side… it is a pain!
So for example in these images below. They all share the same token, "btn" Even with the atomic CSS off, it still generates it own seperate CSS Class. 3 different classes doing the exact same thing " W-heading-1" " W-button" "W-link-1" When simply all they need is just one common class as in "btn" the token class.
