Component styles

🟨 Slightly different to Blazor Server

CSS is a powerful tool that allows you to control the visual presentation of HTML elements in a web page. In this tutorial, you will learn about the various ways to add CSS to a component in Blazor. Specifically, we will cover the following topics:

• Different methods for adding CSS to a component.
• CSS class name pollution and how to avoid.
• Global styles.
• Scoped styles.
• Internal styles.
• External styles.
• Inline styles.
• Key differences between Blazor WebAssembly and Blazor Server.

By the end of this tutorial, you will have a solid understanding of how to use CSS in a Blazor component to create visually appealing and responsive web pages.

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

Different methods for adding CSS to a component

In Blazor, there are many ways to add CSS to a component.

• Global styles: applied to the entire application.
• Scoped styles: applied only to the component they are defined in.
• Internal CSS: defined within the component's template using the <style> tag.
• External CSS: defined in a separate CSS file and imported into the component.
• Inline CSS: defined directly on an element using the style attribute.

CSS class name pollution and how to avoid

CSS class name pollution refers to the practice of using overly specific or generic class names in your CSS code. This can make it difficult to maintain your code over time and can lead to unexpected behaviour when trying to style elements on a page. When you use overly specific class names, you may end up with a large number of classes that are only used on a small number of elements. This makes it harder to understand what styles will be applied to which elements, and it can also make it more difficult to make changes to the styles later on. On the other hand, when you use overly generic class names, you may end up with a large number of elements sharing the same class name, making it difficult to target specific elements. This can also lead to unexpected behaviour when trying to style elements on a page. To prevent CSS class name pollution and ensure maintainable and organized code, Blazor offers the ability to scope CSS classes within a specific component. This means that the styles associated with a given class name will only affect elements within the designated component, allowing for the safe and efficient re-use of class names across multiple components without the risk of unintended styling conflicts.

Global styles

Global CSS is a technique that allows for the efficient re-use of CSS styles across all components within a project. This can be achieved by defining shared CSS styles in a global stylesheet, such as /wwwroot/css/app.css, which is automatically imported by default in the index.html file. For example, in your app.css file, you define a new CSS rule as follows:

.global
{
    color: darkviolet;
}

Then you can use .global in any component.

<span class="global">The text is formatted darkviolet in global file app.css</span>

Approach the use of global CSS styles with care to avoid the build-up of unnecessary class names in your codebase.

Scoped styles

Scoped styles can help you avoid CSS class name pollution, but the topic can be complex for those who are not familiar with it. To make it easier to understand, we will discuss the following topics:

• The definition and concept of scoped styles.
• Understanding how scoped styles work in Blazor.
• How to create a scoped CSS file
• How to override a scoped style.

The definition and concept of scoped styles

Scoped styles are the opposite of global styles, where in global styles, any CSS class can be used in any component. Conversely, with scoped styles, all CSS classes are confined to the component in which they are defined. If an attempt is made to use scoped CSS classes outside of their defined component, the styles will appear as undefined. This technique helps to mitigate CSS name pollution. The illustration below demonstrates the contrast between the scoped styles and global styles models.

If you are using Blazor WebAssembly App Empty as the project template, you need to head to index.html and uncomment the <link> tag in order to enable the scoped styles.

Understanding how scoped styles work in Blazor

Blazor allows for the use of scoped styles, where CSS styles are applied only to specific HTML elements rather than globally. This is achieved through the use of unique attributes added to each HTML tag, which are then matched with CSS selectors to create a scoping effect.

How to create a scoped CSS file

To create component-specific styles, create a .razor.css file with the same name as the corresponding .razor file for the component. This file should be located in the same folder as the component. The .razor.css file is a scoped CSS file, meaning it will only apply to the corresponding component. For example, if you have a component named Example in an Example.razor file, you should create a file called Example.razor.css in the same folder as the Example.razor file. This file will hold the scoped CSS styles for the Example component.

How to override a scoped style

Sometimes, the isolated CSS rules of a component may not align with your desired design or theme. In such cases, it is possible to override these rules. It is important to note that isolated CSS does not mean it cannot be overridden. Rather, it means that it will not be overridden by default. Overriding the isolated CSS of a component will not affect other areas of your website. It is only possible to override a scoped style with another scoped style. Assuming you have the scoped style .scoped in the ScopedStyle component, to override an isolated style in a child component, follow these steps:

1. In the parent component, wrap the child component in a tag with a class.

<div class="overriding">
    <ScopedStyle />
</div>

2. Create an isolated CSS file for the parent component.

3. Create a new CSS rule using the syntax: <parent-css-selector> ::deep <overriden-css-selector>.

.overriding ::deep .scoped
{
    color: green;
}

Internal styles

Internal styles is a technique that embeds the CSS styles within the component file itself. However, this approach does come with some risks. One risk is the potential for repeated CSS rules when the component is being reused, which can lead to larger file sizes and slower performance. Another risk is the possibility of unexpected overrides of CSS rules, which can lead to unexpected changes in the appearance of your components. To implement internal styles, you can simply add a <style> tag within your component file. For example:

<span class="internal-style">Hello Blazor School!</span>

<style>
    .internal-style
    {
        color: darkviolet;
    }
</style>

It is important to note that this technique is not suitable for all use cases, and it should be used carefully.

External styles

External styles is a technique that is similar to internal styles, but instead of embedding the CSS styles inside a component, the styles are defined in an external CSS file and the component references that file using the <link> tag. This allows for a separation of concerns between the component's structure and its presentation, and also enables the reuse of styles across multiple components. This approach allows for easier maintenance and scaling of styles, and is suitable for larger projects or projects with a lot of components. However, it is worth noting that external styles still come with their own set of risks. One risk is that, if the component that imports the CSS file is being re-used, the HTML tags may be repeated. Another risk is that, if the imported CSS file has not been loaded yet, it will be loaded over the internet again, which can make the component flashy because the component will be rendered whether the file is loaded or not. Once the CSS file is loaded, it will apply to the component and change its UI. But once the file is loaded it will be cached by the browser so it will not be loaded again. To mitigate these risks, you should import the external styles at index.html.

<link href="/css/external.css" rel="stylesheet" /> @*You should move this line to index.html*@
<span class="external">The text is formatted darkviolet in external file external.css.</span>

Inline styles

Inline CSS is a technique in which the CSS styles are directly applied to an HTML element using the style attribute. This allows you to apply styles to a specific element without affecting other elements on the same page. The inline CSS is written directly in the HTML file, and it only affects the elements that it is applied to, and it has highest specificity level, it means that it will override any other styles that have been applied to the same element.

For example, you can apply an inline style to a specific paragraph element like this:

<span style="color: darkviolet">The text is formatted darkviolet by inline code</span>

It is worth noting that inline CSS is generally not recommended for larger projects or projects with a lot of components, as it can make the HTML code harder to read and maintain. It also makes it difficult to reuse styles across multiple elements, and it can lead to code repetition and a lack of consistency in the styles of your website.

It's better to use other techniques for better maintainability and scalability. However, in certain cases, such as when you need to apply styles to a specific element in response to a user action, inline styles can be useful.

Key differences between Blazor WebAssembly and Blazor Server

In Blazor Server, there are a couple of key differences when it comes to working with CSS styles. First, the global CSS file is not named app.css as it is in Blazor WebAssembly, instead it is named site.css. Second, the global CSS file is imported in the _Host.cshtml file and not in the index.html file. This means that, in Blazor Server, the site-wide styles are defined in the site.css file and imported in the _Host.cshtml file, rather than in the index.html file as in Blazor WebAssembly. These small differences help to keep the organization and structure of the codebase consistent between the two frameworks.