How To Add Module CSS isolation in Blazor ?

Blazor CSS Isolation: Keep Your Styles in Check

Blazor’s CSS isolation feature is a game-changer for building well-structured and maintainable web applications. It allows you to keep your styles neatly organized within individual components, preventing conflicts and making your code easier to manage.

Here’s the gist of how it works:

1. Component-Specific CSS: Create a CSS file for each component (e.g., MyComponent.razor.css for MyComponent.razor). This file houses all the styles specific to that component.
2. Style Your Component: Use the defined class names within your component’s Razor file to apply the styles.
3. Automatic Scoping: Blazor takes care of the magic! It automatically adds unique identifiers to your component’s elements and the corresponding CSS rules, ensuring that the styles only apply to that specific component.

Example:

MyComponent.razor:

/* MyComponent.razor.css */
.my-component-style {
color: blue;
font-size: 20px;
}

@page "/mycomponent"

<div class="my-component-style">
    This text is styled by component-specific CSS.
</div>

MyComponent.razor.css:

.my-component-style {
    color: blue;
    font-size: 20px;
}

Benefits of CSS Isolation:

• No More Style Conflicts: Say goodbye to the frustration of styles clashing between components.
• Modular and Maintainable Code: Keep your styles organized and easy to manage, making your codebase cleaner and more understandable.
• Improved Reusability: Components can be reused across your application without worrying about style conflicts.

Remember:

• Global Styles: For styles that need to apply across your entire application, use a shared CSS file in the wwwroot/css folder.
• Browser Developer Tools: You can see the unique identifiers Blazor adds to your elements and styles in your browser’s developer tools.

CSS isolation is a powerful tool for building robust and maintainable Blazor applications. By keeping your styles organized and isolated, you can create a more efficient and enjoyable development experience.