CssBuilder
A Builder pattern for cleanly managing conditional CSS classes in ASP.NET Razor Components.
Overview
CssBuilder is a Builder pattern for CSS classes to be used with Razor Components.
Use Cases
Not Ideal For
- Projects not using ASP.NET Razor Components (Blazor)
- Very simple components with few or no conditional CSS classes
- Teams heavily invested in utility-first CSS frameworks like Tailwind CSS
- Scenarios requiring dynamic inline styles or CSS variable management beyond class strings
Pros & Cons
Pros
Centralizes CSS logic with the AddClass method and boolean conditions, as shown in the README's refactored example where bl-active and bl-disabled are cleanly handled based on component state.
Enables string interpolation for dynamic class names, such as bl-${SomeValue}, allowing flexible styling based on runtime values without manual concatenation.
The AddClassFromAttributes method merges splatted CSS attributes from AdditionalAttributes, essential for Blazor components that accept arbitrary parameters, as demonstrated in the attribute splatting example.
SetPrefix method applies a common prefix like bl- to multiple classes, reducing redundancy and errors, illustrated in the refactored code with SetPrefix('bl-').AddClass('nav-link').
Cons
Tied exclusively to ASP.NET Razor Components, making it irrelevant for other web frameworks like React, Vue, or traditional ASP.NET MVC, which limits its adoption outside the Blazor ecosystem.
For components with static or minimal conditional classes, the builder pattern adds unnecessary code complexity compared to inline conditionals or simple string concatenation, as seen in the basic problem example.
Introduces an external library dependency for CSS string building, which might conflict with projects aiming for minimal dependencies or those using alternative styling approaches like CSS modules.
Frequently Asked Questions
Related Projects
FluxorFluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor.
Blazored.LocalStorageA library to provide access to local storage in Blazor applications
bUnit - a testing library for Blazor componentsbUnit is a testing library for Blazor components that make tests look, feel, and runs like regular unit tests. bUnit makes it easy to render and control a component under test’s life-cycle, pass parameter and inject services into it, trigger event handlers, and verify the rendered markup from the component using a built-in semantic HTML comparer.
Blazor-StateA Blazor State management library by TimeWarp.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.