CSS Custom Properties for every Component
I'm working on a project in Astro and using Svelte to handle all UI components. This project is getting very complex.
I have styling for a child component that is specific to a parent component.
Is it a bad idea / bad practice to create custom properties in a child with a child's name on the variable? Or, would it be better to have parent specific styling in child?
In Svelte (and how I have my project setup) there is no real way of controlling child styles from a parent without passing through inline styles etc.
For example my code may look something like this...
Item.svelte "<style> li { width: var(--li-width, 5rem); padding: var(--li-padding, 2em); ... etc.
List.svelte "<style> ul { width: var(--ul-width, 5rem); padding: var(--ul-padding, 2em); ... etc.
Tabs.svelte "<style> .tabs { --ul-padding: 3rem; --li-width: 20%; ... etc.
Or ..
List.svelte "<style> ul { width: 5rem etc...} .tabs-list { width: 2rem; etc...} </style>
10 Replies
Do you have a Repo of this? I would need to see more to understand the why
Seems like you might just be over defining things period from what you pasted. But I can't tell without more to go on.
typically you want to avoid strict width/heights
The repo isn't public (work related). I'm basically just asking if it's a bad idea to create css custom properties like this or just control the styling of a child component that is specific to the parent from the child? Lol, I know this is off the wall 😂ðŸ˜
I mean what you posted yes
I would say there is something bad going on xD
is it wrong to use custom props like that though? No absolutely not
Like in this example https://sveltebyexample.com/css-custom-properties/
Svelte lets you just use a custom prop as prop too fyi
https://svelte.dev/docs/component-directives#style-props
Right, but That's passing the custom props as inline styles..?
its just passing it
not sure what you mean
examples are pretty clear
When you inspect it with dev tools you'll see <div styles="--custom-prop: style;" >
oh yea the compiled does
I'm trying to control my styles without bloating the HTML. Lol I know a ton of custom properties is bloat, but since Astro components are scooped, they're not seen on inspect. 😩
Again without more to go on I can't really help
I would question why you are even passing those widths and paddings in teh first place
big flag for me
The width and padding were just examples.. I think I'm just going to avoid styling children from parents. And just create a class for the parent specific components in children.
Thank you for trying to help.