Svelte better global CSS handling idea

[Loizzus]

Describe the problem

I am a front end developer and I love Svelte (been using it for years). The only (minor) issue I have is with the way the global CSS is done. Having styles in each +page.svelte file is fantastic, and I would like it to be that good for global styles as well.

Having to wrap every class in :global() is clunky and ugly and makes the code non standard.
In practice what I do on my large projects is use .css files, one for each section. The difficulty with this is then when navigating between sections of the site that have different .css files, each link needs the data-sveltekit-reload property or other workarounds to remove the old classes before loading the new ones.

Describe the proposed solution

Ideally every +layout.svelte <style> section will apply that CSS to every file on the same level or in a sub directory to it. That way we will have targeted globals.

So in the image below the CSS in +layout.svelte would only apply to everything in the portal folder and every sub route such as /portal/times

Importance

would make my life easier

[Conduitry]

This is all possible today.

In Svelte 5, you can wrap a whole bunch of selectors in :global { } at once. https://svelte.dev/docs/svelte/global-styles#:global

You can use partially global selectors to style all (unscoped) descendants of a given (scoped) element, and then wrap the entire contents of a layout (including the {@render}/<slot>) with an element targeted by the scoped portion of those selectors.

[Loizzus]

Hi @Conduitry, thank you for getting back to me, I did not know I could wrap many classes in the global tag now. However when testing what you suggested I found an issue.

Because of CSS specificity if an element has more classes than another then it takes precedence when being rendered. So if in one of my +page.svelte files I want to edit an element to make it work perfectly for that page I will usually add a class to it (in most of my pages I have special cases that need custom styles).

However as you can see my custom styles are now being ignored in favour of the global styles from my +layout.svelte file.

I did try using ID's instead of classes to select the element and that does work in some cases, but would not work if I wanted to select the same class name that is called in the +layout.svelte file (without creating a second selector for every element).

Also generally ID's are for javascript and classes for CSS, I have not used them in my design work for a long long time. It would also require an substantial amount of work to change all classes to ID's.

Perhaps I am missing something else but I have not figured out what.

Cheers, Loic