Don't have any scoped CSS

[linkdotnet]

While scoped CSS is nice, it also makes certain things like creating critical CSS more complicated.

Therefore all scoped CSS should either:

• Be Bootstrap 5 utility classes
• Or: part of the basic.css

[otutukingsley]

@linkdotnet I would like to work on this issue. can you assign it to me?

[linkdotnet]

Love it - thanks and done ;)

also don’t feel pressured to do all the work. I am fine if we split this into multiple PRs.

[linkdotnet]

Hey @otutukingsley I removed the assignment for now. If you work on this, let me know and I add you again

[EliasMasche]

Hello there, how is going this task? I am interested in providing more support to the project and it seems this one at my reach and for learning into front-end too.

[linkdotnet]

If you want, feel free to pick it up and ask me any question regarding it.

My idea would not only be removing any scoped CSS and move it to the root CSS, but also use more bootstrap utility classes when applicable. I started my journey without much knowledge of bootstrap itself, so I created way too much custom CSS where it wasn't necessary.

So probably I would do it in 3 steps:

1. Move out all the CSS into the root CSS (or a second CSS file just for that you can add to the _Host.cshtml)
2. Try to consolidate overlapped shared CSS into classes
3. Try to use bootstrap classes instead of those
   What is left is belonging to our root css.

[EliasMasche]

Thanks for the info and steps will write when I get some progress

[linkdotnet]

I have a stronger opinion, that we should go into the direction of something like tailwindcss that makes a lot of things easier. I tried it out in another Blazor project, and with v4, it was a pleasant experience.

[EliasMasche]

That sounds good and interesting. I am looking at Tailwindcss because I am also learning some front-end, but I haven't been able to progress that much because of work and other stuff.

[linkdotnet]

@EliasMasche If you need a basic setup for v4, I already created a branch to toy around: https://github.com/linkdotnet/Blog/tree/tailwind

[EliasMasche]

thanks and the same task is required for the branch of tailwind? or something else will be the work

[linkdotnet]

No no. This was just my "playground" with tailwind 4. You can use it if you wish, but feel free to use your own branch/process/style/...
I created that branch (also a blog post about it) so it might be easier to get the annoying stuff out of the way.

[EliasMasche]

Ah gotcha, thanks for the info, so about this task we will still be available or gonna be deprecated with tailwind css?

[linkdotnet]

The task is still valid:

1. Tailwindcss is one approach to tackle that

But that might be too big to tackle anyway - that is why I just played around. Using tailwind would mean to go through every component and somewhat restyle it (I am absolutely fine with that, even if that means the blog looks different, which I welcome).

But that is nothing you do in an hour or two :D

[EliasMasche]

Oki doki, thanks for the info and update, I will take a look through my free time and post some updates

[EliasMasche]

Hello there.

I have time this week to tackle about ScopedCSS first with bootstrap and later for tailwind branch.
Based how is the organization of the pages and components I have a question and curiosity about how to organize the CSS files:

• All in one like an uber app.css

OR

• Each page will have its own CSS file like DashboardPage.razor will include DashboardPage.razor.css

Or maybe I am confused with Blazor CSS Isolation

[linkdotnet]

The idea is to remove all *.razor.css. This approach, while having upsides, has two major downsides:

1. CSS is cluttered all over the place even though we have Bootstrap. So it might be confusing
2. It does not work well with critical CSS generators, as you always have to recreate the critical css.The reason is that isolated CSS files get random suffixes.

My hope would be not to have enormous amounts of custom CSS in the first place.
Well, if that is the case, maybe it doesn't make sense to consolidate it.

[EliasMasche]

Thanks for the explanation. I understand better now.

A plan I have for removing all *.razor.css will be to create a razor.css inside wwwroot/css and tonot mix and/or be a too long in basics.css, so inside razor.css will be put CSS of the razor pages.

Is that sound good I will start working from there

[linkdotnet]

Basically there shouldn't be any razor.css whatsoever. That would be the overarching goal.

[EliasMasche]

I opened a draft of PR for Scoped CSS refactor

I had a slow start because of the unhandled exception at my local PC, but at least Codespaces saved me. It was an interesting experience.

I classified into smaller CSS files the razor.css based on the features folder except Home folder that went into basic.css

It is an initial draft, and that can be improved how to organize the files, An issue I am having with About Me and IntroductionCard.razor.css when relocated inside home.css stop working and gets confused displaying like this:

I tried changing and naming it uniquely but wasn't able to fix it