CSS Isolation in Blazor Applications in 10 Minutes or Less

Подписаться 420 тыс.

Просмотров 9 тыс.

50% 1

CSS Isolation is a tool that allows us to apply custom styles to only a specific component in Blazor. In this ten-minute training episode, I will demonstrate how CSS isolation works and how to configure it for your application.
Full Training Courses: IAmTimCorey.com
Source Code: leadmagnets.ap...
Mailing List: signup.iamtimc...

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@S3Kglitches 7 месяцев назад

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.

@IAmTimCorey 7 месяцев назад

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.

@Jabby97 4 месяца назад

Nice video, Corey.

@IAmTimCorey 4 месяца назад

Thanks!

@SirBenJamin_ 7 месяцев назад

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.

@IAmTimCorey 7 месяцев назад

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.

@zlozlozlo 7 месяцев назад

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 .

@IAmTimCorey 7 месяцев назад

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.

@mahdiyar6725 7 месяцев назад

I usually use tailwind css but it's a nice tip

@IAmTimCorey 7 месяцев назад

Great!

@Cornelis1983 7 месяцев назад

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.

@dave7038 7 месяцев назад

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.

@IAmTimCorey 7 месяцев назад

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.

@jorgeutrilla9892 7 месяцев назад

WIth MudBlazor I believe you have to make use of the deep 'selector'

@sopheakuk 5 месяцев назад

hi, May I know how to clear cache of isolated css of razor page?

@IAmTimCorey 5 месяцев назад

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.

@TheGhettoviertel 7 месяцев назад

@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.

@IAmTimCorey 7 месяцев назад

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/

@Blazor77756 7 месяцев назад

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?

@Julio860JVL 7 месяцев назад

I recommend you to watch his video title as "How To Learn Web Development In 2023".

@johanneszellinger232 7 месяцев назад

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?

@IAmTimCorey 7 месяцев назад

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.

@ahmedbouaouda4531 7 месяцев назад

@@IAmTimCorey could you make a video about it please ?

@johanneszellinger232 7 месяцев назад

@IAmTimCorey Thank you for the info! :)

@alsa91 7 месяцев назад

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?

@Kiki-sl3nz 7 месяцев назад

Nono😂 all my friend's work for it without bachelor.....

@IAmTimCorey 7 месяцев назад

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.

@alsa91 7 месяцев назад

@@IAmTimCorey thx alot Tim i appreciate you taking time to read and answer my question this means alot 😊