search

sveltekit / ui

Powerful, reliable & fully featured Svelte UI library
https://sveltekit.now.sh
Other
63 stars 7 forks source link

Alternative to Verbose CSS variables #7

Open d3dc opened 4 years ago

d3dc commented 4 years ago

It seems like there's an ongoing discussion on this so this issue might be redundant in the scope of things.

I guess the reason for the verbose naming is to avoid collision with the user's defined values and have a global "theme". If I have a one-off Card or similar, its a lot of typing --Card- in the style attribute.

It might be convenient to expose Component-level CSS variables as props just for that reason:

<script>
  export let borderRadius
</script>

<div style="--Card-border-radius: {borderRadius}">
</div>

edit: Hadn't seen https://github.com/sveltejs/rfcs/pull/13 yet...

rob-balfre commented 4 years ago

@d3dc yeah jury is still out on how we are gonna handle CSS vars. Will keep this open...