Nickadeemus
KPCKevin Powell - Community
•Created by Nickadeemus on 11/9/2023 in #front-end
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>
23 replies