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>

b1mind•11/9/23, 5:20 PM

Do you have a Repo of this? I would need to see more to understand the why

b1mind•11/9/23, 5:20 PM

Seems like you might just be over defining things period from what you pasted. But I can't tell without more to go on.

b1mind•11/9/23, 5:21 PM

typically you want to avoid strict width/heights

NickadeemusOP•11/9/23, 5:26 PM

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

b1mind•11/9/23, 5:27 PM

I mean what you posted yes

b1mind•11/9/23, 5:27 PM

I would say there is something bad going on xD

b1mind•11/9/23, 5:28 PM

is it wrong to use custom props like that though? No absolutely not

b1mind•11/9/23, 5:29 PM

Like in this example https://sveltebyexample.com/css-custom-properties/

b1mind•11/9/23, 5:29 PM

Svelte lets you just use a custom prop as prop too fyi

b1mind•11/9/23, 5:30 PM

https://svelte.dev/docs/component-directives#style-props

NickadeemusOP•11/9/23, 5:31 PM

Right, but That's passing the custom props as inline styles..?

b1mind•11/9/23, 5:33 PM

its just passing it

b1mind•11/9/23, 5:33 PM

not sure what you mean

b1mind•11/9/23, 5:33 PM

examples are pretty clear

NickadeemusOP•11/9/23, 5:37 PM

When you inspect it with dev tools you'll see <div styles="--custom-prop: style;" >

b1mind•11/9/23, 5:39 PM

oh yea the compiled does

NickadeemusOP•11/9/23, 5:42 PM

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.

b1mind•11/9/23, 5:43 PM

Again without more to go on I can't really help

b1mind•11/9/23, 5:43 PM

I would question why you are even passing those widths and paddings in teh first place

b1mind•11/9/23, 5:43 PM

big flag for me

NickadeemusOP•11/9/23, 6:19 PM

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.

NickadeemusOP•11/9/23, 6:19 PM

Thank you for trying to help.