Hi guys,
I'm trying to create a class called 'card' which has a certain height, width and bottom margin. Now, while I can have the styling properties like bg color, dropshadow etc as part of the class, I have to manually edit each card if I want to change things like margin or width. Adding 'margin:x;' in the escape hatch seems to have no effect.
I feel one should be able to control layout as well as styling properties within classes. Or am I missing something?
Hi @omnisine, we originally had layout properties as part of classes, but we took them out because it led to some confusing situations:
Elements can have multiple classes, and it wasn't obvious how we should combine properties. E.g., if class A has a top margin and class B has a bottom margin, does an element that has both classes have the margin on the top and bottom, or does the last class "win"? (This last-class-wins behavior is what happens now if you, for example, have two classes that each define, say, a background color)
What happens when a class has layout conflict with the element? Like if the element is in "freeform mode" but the class has a "max-width" set on computed mode layout?
That said, we're not 100% confident about this --- there are certainly situations where you want to share some layout values between different elements, like the "card" situation you are describing.
Right now you may be able to solve your issue to make a single "card" component with different states.
I'd love to see if you can accomplish what you want that way, and if not, if you could explain some of the trouble you ran into.