Are components designed to be sections of a page in general or could they be used for rows in a table too? I'm coming from a WPF background where we have UserControls for large sections and then DataTemplates for smaller sections. For example, in WPF, I would have an ItemsControl to display a number of rows in a stackpanel, and then a DataTemplate to define how each row would look. What is the analogous situation in Blazor? I appreciate I'm comparing apples to oranges as they're different technologies, but hopefully you get the idea of what I am asking.
Components can be as big or as small as you want. Yes, you could do one component per row or have a table component that then has components per row inside of it.
You could have mentioned the most important part behind the magic CssDemo.styles.css and where it comes from. It's probably related to compilation of the Blazor project but some new people might not know that at all.
That would have taken us out of the 10-minute training and into a much longer explanation. Basically, the compiler builds it when it builds the application. Some cool stuff happens during the process, though.
There is no special CSS once it runs in production. It is just part of your regular CSS file. So to clear the cache of the isolated CSS entries, you would just clear the cache of your CSS file.
Hi Tim, thank you for you video. Forgive my trivial question, I am a newby in this field. How did you create the CSSDemo.client project compared to CSSDemo? They have the same icon and general properties but the tree and the contents are quite different. I see in Program.cs that CSSDemo is a webapplication, the other one is a webassembly. Did you start from the same template and then edit the project manually? Thank you.
No worries. I'm glad you asked. It used to be when you created a Blazor WebAssembly project and selected the "hosted" option (a checkbox during the wizard), you would get both the server project (basically an API) and the client project. Things have changed a bit now, though.
I was hoping this would be about isolating CSS from the other side - isolating a component from any CSS coming from outside the component. Just last week I was trying to solve this - "stopping the cascade", starting with a "clean sheet" at the level of my component. In the end I had to resort to using an .
Hi, thanks for the nice tutorial! I have used css-isolation in Blazor before, however my current setup is that I have downloaded the bootstrap source code in a separate project and compile the scss code with a web-compiler and then inject a minified css into the wwwroot folder of the blazor project. This way I can create my own themes or adapt stuff I from bootstrap. However, this also means that in my isolated css files I cannot access and use any scss variables. Is this somehow possible?
No, your isolated CSS cannot access SCSS variables. However, CSS has variables now. If you use those instead, the isolated CSS could use those variables. Bootstrap already uses these variables in v5. For example, you could use "color: var(--bs-blue);" to use the Bootstrap blue color on your font.
I think isolated CSS is cool, but if I remember correctly, it is only restricted to the html tags. I use MudBlazor in my projects and some MudBlazor components have a Class property accepting CSS and that doesn't pick up the CSS from the isolated CSS as it is passed to a different Blazor Component. This makes sense though if you think about it, but if you don't, it can lead to tricky bugs which might not be an obvious bug in the first place.
I've been trying to use isolated CSS and have found it so frustrating that I've pretty much given up on it. I am using MudBlazor though, so possibly what you describe is what I'm running into. So thanks, I'll look a little deeper at this issue.
Interesting. I hadn't tried it with MudBlazor. Personally, I just use good CSS, which allows me to customize per component without trying to do CSS isolation. That would address your issue as well, I would think.
@IAmTimCorey woud be nice if you coud explain how to coimmunicate in hybrid like this with this. Server -> Client and Client -> Server Like making a login page with a Maria DB SQL Server or so.
Tim maybe u can give me your opinion or point me to a video. I did an apprenticeship as a software developer in Germany it was 3 years but everybody is telling me that without a bachelor degree i have bad chances abroad. Do u agree?
This is a tricky question. In general, the answer is no, you do not need a degree. It you have the work experience, that is all you will need. However, different companies are different. I worked for a company once where they would not hire my coworker directly because he didn't have his degree, even though the job was to work on the system he built. So then, they contracted with my boss to work on the system. My boss gave the job to my coworker (and they paid a LOT more to do so). The other tricky bit is the "abroad" part. Sometimes companies have different standards for developers from other countries. My recommendation is to just start looking. I have a number of videos on this channel in the Dev Questions series that will help you with proving your skills.
That's not true. I just created a new project and added custom CSS to the Counter and Weather components to verify. Each changed the H1 tag's color to a different color. Then I put the Counter component on the Weather component and then put the Weather component on the Home page. That meant that there were three H1 tags on the Home page (one each for Home, Weather, and Counter). Each H1 was a different color, based upon the CSS for that specific component. My guess is that you have a cascade issue and don't realize it. Remember that all this is doing is applying a specific CSS to your components controls. It can still be overridden by things like !important or other, more specific CSS statements.
Are components designed to be sections of a page in general or could they be used for rows in a table too? I'm coming from a WPF background where we have UserControls for large sections and then DataTemplates for smaller sections. For example, in WPF, I would have an ItemsControl to display a number of rows in a stackpanel, and then a DataTemplate to define how each row would look. What is the analogous situation in Blazor? I appreciate I'm comparing apples to oranges as they're different technologies, but hopefully you get the idea of what I am asking.
Components can be as big or as small as you want. Yes, you could do one component per row or have a table component that then has components per row inside of it.
You could have mentioned the most important part behind the magic CssDemo.styles.css and where it comes from.
It's probably related to compilation of the Blazor project but some new people might not know that at all.
That would have taken us out of the 10-minute training and into a much longer explanation. Basically, the compiler builds it when it builds the application. Some cool stuff happens during the process, though.
hi, May I know how to clear cache of isolated css of razor page?
There is no special CSS once it runs in production. It is just part of your regular CSS file. So to clear the cache of the isolated CSS entries, you would just clear the cache of your CSS file.
Hi Tim, thank you for you video. Forgive my trivial question, I am a newby in this field. How did you create the CSSDemo.client project compared to CSSDemo? They have the same icon and general properties but the tree and the contents are quite different. I see in Program.cs that CSSDemo is a webapplication, the other one is a webassembly. Did you start from the same template and then edit the project manually? Thank you.
No worries. I'm glad you asked. It used to be when you created a Blazor WebAssembly project and selected the "hosted" option (a checkbox during the wizard), you would get both the server project (basically an API) and the client project. Things have changed a bit now, though.
Yes, indeed. By the way, thank you.
I was hoping this would be about isolating CSS from the other side - isolating a component from any CSS coming from outside the component. Just last week I was trying to solve this - "stopping the cascade", starting with a "clean sheet" at the level of my component. In the end I had to resort to using an .
Yeah, that's not really how CSS works on the web. You can override anything you want, but turning it off requires you to disable it at the page level.
Hi, thanks for the nice tutorial! I have used css-isolation in Blazor before, however my current setup is that I have downloaded the bootstrap source code in a separate project and compile the scss code with a web-compiler and then inject a minified css into the wwwroot folder of the blazor project. This way I can create my own themes or adapt stuff I from bootstrap. However, this also means that in my isolated css files I cannot access and use any scss variables. Is this somehow possible?
No, your isolated CSS cannot access SCSS variables. However, CSS has variables now. If you use those instead, the isolated CSS could use those variables. Bootstrap already uses these variables in v5. For example, you could use "color: var(--bs-blue);" to use the Bootstrap blue color on your font.
@@IAmTimCorey could you make a video about it please ?
@IAmTimCorey Thank you for the info! :)
I think isolated CSS is cool, but if I remember correctly, it is only restricted to the html tags. I use MudBlazor in my projects and some MudBlazor components have a Class property accepting CSS and that doesn't pick up the CSS from the isolated CSS as it is passed to a different Blazor Component. This makes sense though if you think about it, but if you don't, it can lead to tricky bugs which might not be an obvious bug in the first place.
I've been trying to use isolated CSS and have found it so frustrating that I've pretty much given up on it. I am using MudBlazor though, so possibly what you describe is what I'm running into. So thanks, I'll look a little deeper at this issue.
Interesting. I hadn't tried it with MudBlazor. Personally, I just use good CSS, which allows me to customize per component without trying to do CSS isolation. That would address your issue as well, I would think.
WIth MudBlazor I believe you have to make use of the deep 'selector'
I started learning a blazer a while ago, and I learned the basics of ASP .NET Core, while a blazer learned a fullstak, so what is your advice to me?
I recommend you to watch his video title as "How To Learn Web Development In 2023".
@IAmTimCorey woud be nice if you coud explain how to coimmunicate in hybrid like this with this.
Server -> Client and Client -> Server
Like making a login page with a Maria DB SQL Server or so.
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Nice video, Corey.
Thanks!
Tim maybe u can give me your opinion or point me to a video. I did an apprenticeship as a software developer in Germany it was 3 years but everybody is telling me that without a bachelor degree i have bad chances abroad. Do u agree?
Nono😂 all my friend's work for it without bachelor.....
This is a tricky question. In general, the answer is no, you do not need a degree. It you have the work experience, that is all you will need. However, different companies are different. I worked for a company once where they would not hire my coworker directly because he didn't have his degree, even though the job was to work on the system he built. So then, they contracted with my boss to work on the system. My boss gave the job to my coworker (and they paid a LOT more to do so). The other tricky bit is the "abroad" part. Sometimes companies have different standards for developers from other countries. My recommendation is to just start looking. I have a number of videos on this channel in the Dev Questions series that will help you with proving your skills.
@@IAmTimCorey thx alot Tim i appreciate you taking time to read and answer my question this means alot 😊
I usually use tailwind css but it's a nice tip
Great!
What about demowithcss.js
What are you asking about? The per-component JavaScript files or the compiled set of per-component JavaScript files?
@@IAmTimCorey I meant per component JavaScript like css
I’ll do a separate video on that at some point.
Thanks.
Doesn't work out of the box if u use other components in a component...so ur team should research more...
That's not true. I just created a new project and added custom CSS to the Counter and Weather components to verify. Each changed the H1 tag's color to a different color. Then I put the Counter component on the Weather component and then put the Weather component on the Home page. That meant that there were three H1 tags on the Home page (one each for Home, Weather, and Counter). Each H1 was a different color, based upon the CSS for that specific component.
My guess is that you have a cascade issue and don't realize it. Remember that all this is doing is applying a specific CSS to your components controls. It can still be overridden by things like !important or other, more specific CSS statements.