I ❤️ .NET

In our previous article Blazor WASM Javascript Interop and Isolation, we learn't how to use Javascript in blazor wasm and also understood that we should try to keep the Javascript usage to very minimal level. This needs to be considered when choosing styling libraries. In this article let's learn about few factors to be considered when styling blazor apps and also learn about what is CSS Isolation.

Table of Contents

1. CSS Frameworks
2. CSS Isolation
3. Summary

Factors to be considered before choosing the styling framework

Bootstrap has been widely accepted by many of the developers across the globe. Even I have used bootstrap in most of my projects till now and also the default blazor wasm project template comes with bootstrap as the default styling toolkit. That's because of it's built in responsive nature. But the major drawback of using bootstrap with blazor is the Javascript dependency. Almost all bootstrap components needs Javascript for event handling and changing states of the component. But this doesn't work well with blazor component lifecycle. Hence you can only use few components from bootstrap like alerts, badge, etc which can work without Javascript. I personally don't prefer styling my blazor apps with bootstrap because of the above drawbacks.

With the new CSS features like Flexbox and Grid, I recommend to write your own CSS for your blazor apps as that will give you more control of your styles. This again depends on the team's CSS knowledge and timeline we have for the project that we work on. So the alernatives I suggest would be to go for Bulma or TailwindCSS.

Bulma is the only modern pure CSS framework which doesn't require any CSS knowledge. This is 100% responsive and built on top of flexbox and it's modular. We can only import the component's that we need. This being a pure CSS framework we can use C# logics in blazor to write our own event handling like @onclick, @onfocus, etc to bring interactivity to components. But the drawback I see is that this doesn't have many components compared to bootstrap. I ❤️ .NET uses Bulma Dropdown Component for switching between dark mode and light mode. To learn more about how to implement dark mode and light mode in blazor wasm app, refer Blazor WASM Dark Theme and Light Theme.

To start using bulma in your blazor wasm app, follow the below steps.

1. Install Node JS in your operating system.
2. In your project directory, do an npm init and answer questions. This will create a package.json file in your root directory.
3. Do a npm install node-sass bulma
4. Now add Styles.css file in your root directory and import the needed bulma components like follows @import './node_modules/bulma/sass/components/dropdown.sass';
5. Add "buildbulma": "node-sass --omit-source-map-url styles.css wwwroot/css/app.css" inside scripts section in package.json
6. Finally do npm run buildbulma from your project root directory. This will import and add necessary css and output it in wwwroot/css/app.css
7. Make sure to add a reference to app.css in your index.html

TailwindCSS is a utility-first CSS framework with lots of predefined utility classes that help us to speed up the CSS development directly from HTML markup. You don't need any separate CSS file for your components or you don't need to pollute your global CSS. You can almost find any utility class from tailwindcss and it also has configuration available to customise and extend as per own needs. The only limitation here is that you need to be aware of CSS. You need to know when to use which CSS property for your design. This will help you to choose right utility class from tailwindcss. I ❤️ .NET extensively uses TailwindCSS to design and layout components and pages.

To start using tailwindcss in your blazor wasm app, follow the below steps.

1. Install Node JS in your operating system.
2. In your project directory, do an npx tailwindcss init. This will create a package.json and tailwind.config.js file in your root directory.
3. Go to tailwind.config.js and add template files path as follows content: ['../**/*.html', '../**/*.razor', '../**/*.cs']
4. Go to app.css file and import tailwind components like @tailwind base;@tailwind components;@tailwind utilities;
5. Add "buildcss": "npx tailwindcss -i wwwroot/css/app.css -o wwwroot/css/app.min.css --watch" inside scripts section in package.json
6. Finally do npm run buildcss from your project root directory. This will import and add necessary css and output it in wwwroot/css/app.min.css
7. Make sure to add a reference to app.min.css in your index.html

I ❤️ .NET uses both bulma and tailwindcss together. Here is the complete configuration.

In development environment, you can do npm run buildcss:dev and continue with development where as for production you can do npm run buildcss. This can be configured in CI/CD Pipline as well. Additionally you can remove app.css file in Release configuration and also configure Compile event for Release configuration as show below.

If you don't prefer to use TailwindCSS, Bulma, Bootstrap or your own CSS, then you can still Get productive fast with re-usable UI components from top component vendors like Telerik, DevExpress, Syncfusion, Radzen, Infragistics, Grapecity, jQWidgets, Fast Blazor and others. Or use one of the many open-source component libraries from the Blazor community. The drawback I see when going for any of the components is that there is lack of modularity. For using a simple component you need to refer all packages. This increases the overall app size. They also don't work well when assembly trimming is enabled or you need to do additional configurations to make this work perfectly.

CSS Isolation

CSS Isolation helps to add a CSS file specific to a component. This helps to avoid polluting global CSS file and all CSS related to component gets automatically scoped for that particular component. We don't need to worry about one component CSS affecting other component CSS. Blazor WASM takes care of handling these complexities behind the scenes.

Let's say you have a component named Chat.razor. Then you need to add CSS file names Chat.razor.css. IDE will automatically collapse the CSS file within component file. And for the CSS to reflect in your app, you need to add a stylesheet reference link to index.html with your assembly name like <link href="YourProjectAssemblyName.styles.css" rel="stylesheet" />.

Summary

I'm happy that you have reached to the end of this article. Here we learnt about CSS frameworks available for blazor and we saw the factors to be considered before chossing a CSS framework. We also saw how to isolate CSS in blazor apps. Feel free to check the source code of I Love Dotnet to see how styles are isolated.