
Blazor WASM Styles and CSS Isolation
blazor
24 Articles
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
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.
- Install
Node JS
in your operating system. - In your project directory, do an
npm init
and answer questions. This will create apackage.json
file in your root directory. - Do a
npm install node-sass bulma
- 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';
- Add
"buildbulma": "node-sass --omit-source-map-url styles.css wwwroot/css/app.css"
insidescripts
section inpackage.json
- Finally do
npm run buildbulma
from your project root directory. This will import and add necessary css and output it inwwwroot/css/app.css
- Make sure to add a reference to
app.css
in yourindex.html
Code Sample - Blazor WASM Bulma Setup
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.
- Install
Node JS
in your operating system. - In your project directory, do an
npx tailwindcss init
. This will create apackage.json
andtailwind.config.js
file in your root directory. - Go to
tailwind.config.js
and add template files path as followscontent: ['../**/*.html', '../**/*.razor', '../**/*.cs']
- Go to
app.css
file and import tailwind components like@tailwind base;@tailwind components;@tailwind utilities;
- Add
"buildcss": "npx tailwindcss -i wwwroot/css/app.css -o wwwroot/css/app.min.css --watch"
insidescripts
section inpackage.json
- Finally do
npm run buildcss
from your project root directory. This will import and add necessary css and output it inwwwroot/css/app.min.css
- Make sure to add a reference to
app.min.css
in yourindex.html
Code Sample - Blazor WASM Tailwind CSS Setup
I ❤️ .NET uses both bulma and tailwindcss together. Here is the complete configuration.
Code Sample - Blazor WASM Bulma & Tailwind CSS Setup
Code Sample - Blazor WASM Tailwind Config JS
Code Sample - Blazor WASM Purge CSS Config JS
Code Sample - Blazor WASM Styles CSS
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.
Code Sample - Blazor WASM Project File Configuration
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.