Styling and CSS

Styling a component is using CSS to improve UI and UX of a component. In Blazor WebAssembly, there are 2 types of styling a component:

• Isolated CSS.
• Shared CSS.

You can download the example code used in this topic on GitHub.

Isolated CSS

To understand and be able to apply the technique to your project, this section will walk you through:

• What is isolated CSS?
• How Blazor WebAssembly isolates styles?
• Creating an isolated CSS style.
• Overriding an isolated style.

What is isolated CSS?

Isolated CSS is a method to reuse the CSS selector. The CSS is defined in a component and only affects that component whether the name is unique or not. The following illustrates how isolated CSS is compared to the shared CSS.

In the picture, .person-detail is declared at 2 components and also, used inside the component. The .person-detail from the PersonInformation will not affect the .person-detail from the PersonRoleManagement component and vise versa. It demonstrates that you can reuse the CSS class name without worrying about the class name being declared somewhere on the website.

How Blazor WebAssembly isolates styles?

Assuming your Razor Component code is:

<div class="row person-detail person-border">
    ...
</div>

Blazor WebAssembly will generate the following HTML and CSS:

In HTML, Blazor WebAssembly will generate the HTML with an extra attribute (b-3zucffhpbe) which is the scope name. Each component will have a different scope name. In CSS, Blazor WebAssembly will add that scope name to the CSS class. The style only applies when the class name and the scope name are matched so you can reuse the class name in another component.

Creating an isolated CSS style

To create an isolated CSS style, you need to create a razor CSS file. All the styles declared in the razor CSS file will be automatically scoped to that razor component. To create a razor CSS file, add a new file in this pattern <ComponentName>.razor.css. For example, if you have PersonInformation.razor component then your razor CSS file would be PersonInformation.razor.css.

Overriding an isolated style

Isolated styles are defined in a component, sometimes, you want to change the style of that component in a specific place without impacting the other places. The overriding class will be defined in the parent component razor CSS file as the following image illustrates:

• Wrap the children inside an HTML with a CSS class. In our example, we wrapped it inside another <div> tag with overriding CSS class.

<div class="overriding wrapper p-4">
    <h3>Overrided</h3>
    <PersonInformation></PersonInformation>
</div>

• Create a the razor CSS file for the parent component. In our example, the parent component is OverridingIsolatedStyle.razor.

• Use the ::deep keyword with syntax: parentStyle ::deep overridedStyle. In the example, we are going to override the class .person-detail which is declared in PersonInformation.razor.css.

The example not only demonstrates how to override a component's isolated style but also demonstrates how to override only when needed.

The ::deep keyword only works when you put it in an razor CSS file.

Shared CSS

This section will walk you through the following topics to help you understand shared CSS in Blazor WebAssembly:

• What is shared CSS?
• What is CSS selector pollution?
• Global CSS style.
• Embedded CSS style.
• Reference to an external CSS file.
• Compare between sharing CSS techniques.

What is shared CSS?

Shared CSS is a method to use the same CSS for many components. The following illustrates how shared CSS is compared to the isolated CSS.

In the picture, .person-border is defined in app.css and is used in PersonInformation and PersonRoleManagement.

What is CSS selector pollution?

CSS selector pollution is a common problem when developing websites and not only in Blazor WebAssembly but also in other frameworks like Angular, jQuery, Vue, etc...

When developing websites using these frameworks, HTML tags are usually divided by component and later, the component will be injected into another component. When a component defines a CSS selector and another component defines the same CSS selector, the 2 CSS selectors will be merged and give unpredictable results. For example, assuming we don't use isolated CSS technique in the previous example, the PersonInformation and PersonRoleManagement both define .person-detail and all the styles will be merged. The following image illustrates the merge result.

As you can see, the merge result is unpredictable. If the PersonInformation component is rendered first, you get the first result, if the PersonRoleManagement is rendered first, you get the second result.

Global CSS style

Global CSS style is a native technique provided by Blazor WebAssembly. You can declare your CSS selector at app.css and it will automatically affect the entire website.

• Declare a new CSS selector at wwwroot/css/app.css. In our example, you can see the class .person-border in the app.css file.

.person-border
{
    border: 5px solid #7b3cc3;
}

• Use it as with other CSS selectors.

<div class="person-border">
    ...
</div>

Embedded CSS style

Embedded CSS style is a technique where the <style> tag is inside the component.

<h3 class="embedded-style">Welcome to </h3>

<style>
    .embedded-style::after
    {
        content: "Blazor School";
    }
</style>

Reference to an external CSS file

Reference to an external CSS file is a technique similar to Embedded CSS style, but instead of having the <style> tag inside the component, you will put <link> tag.

• Create a new CSS file in /wwwroot/css/external-css-file.css.

.external-style::after
{
    content: "Blazor School";
}

• Use <link> tag in your component.

<link href="/css/external-css-file.css" rel="stylesheet" />
<h3 class="external-style">Welcome to </h3>

Compare between sharing CSS techniques

As described above, there are 3 ways to share the CSS styles across the website.

1. Global CSS style.
2. Embedded CSS style.
3. Reference to an external CSS file.

This section will talk about each technique, their pros and cons, and how to avoid CSS selector pollution.

Global CSS Style: This is the best technique provided by Microsoft. If you combine this technique with Isolated CSS technique, you will never worry about CSS selector pollution at all. Blazor School strongly recommends that you combine both techniques in your project.

Embedded CSS Style: This technique is easy to perform, you can see both styles and HTML tags in one place. It's good when you design UI/UX for a component. Blazor School recommends that you use this technique when developing a component to have a vast view of your component but do not use it in the production stage. First, you will get the CSS selector pollution later on. Second, if a component is rendered multiple times then the style will be rendered multiple times also, leaving a mess to the generated HTML tags and reduce the performance of your website.

Reference to an external CSS file: This technique requires a bit of work compared to Embedded CSS Style technique but you will find it easier to change the style due to the CSS hot reload. Blazor School recommends that you use this technique when developing a component to have a vast view of your component but do not use it in the production stage. First, you will get the CSS selector pollution later on. Second, if a component is rendered multiple times, then the <link> tag will be rendered multiple times also. The following video will show how to hot reload your CSS when performing this technique.