I have had this on again/off again relationship with Blazor for the past year plus. Every major release I come back to it and do a couple quick demo apps (Todo and the like) and then go back to whatever web tech I’m using for my customers. So for this go around during the transition to .Net 5, I decided to take an existing production Angular app and see how hard it would be to convert it to Blazor. The current application is done in the canonical Angular style with modules and components, so I set about converting the site. I opened up my terminal and quickly typed out dotnet new blazorwasm -o Blaze-Convert and started coding.

I quickly discovered that one of the most utilized features of our current app was component scoped styles. For those that are maybe unfamiliar, here is a blurb from the Angular docs:

Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications.

Additionally, Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.

Essentially, this means that we can define a CSS file next to our components that is scoped only to that component. This is utilized by using a unique identifier applied to the component + some HTML5 + CSS3 magic.

#blazor #css #sass #dotnet #angular