Home

CSS & Style Builder Pattern

When building complex components for ASP.NET Razor Components there are often CSS classes generated by multiple factors. Styles can often be added by system & component state, public parameters, and static base CSS classes. Combining many CSS classes together doesn't scale well, and when components get large it can be tough to reason about. The CSS builder pattern fixes this problem by offering a easy to repeat, easy to read pattern to use across components in a project. A clean code approach to conditional CSS in Razor Components.

The problem

Given the component below, the Tab's CSS class is set by multiple sources. The component has paramater UserCss which can be set at externally. A base CSS class bl-nav-link which does not change. Two state based CSS classes bl-active and bl-disabled which are dependent on if the Tab is active or disabled. Rendering for the CSS class is spread across multiple concerns and is hard to maintain.

Component

<Tab UserCss="my-class" Disabled=true >...</Tab>

Component Source Markup

<li class="bl-nav-item">
    <a onclick=@Activate class="bl-nav-link @ActiveCssClass @DisabledCssClass" role="button">
        @Title
    </a>
</li>

Component Source Logic

[Parameter] string UserCss = String.Empty;
protected string ActiveCssClass => IsActive ? "bl-active" : String.Empty;
protected string DisabledCssClass => Disabled ? "bl-disabled" : String.Empty;

The Solution

Using the CSS Builder pattern we can clean up the code and move everything to a single concern. Refactoring the component, we move all of the CSS code to the components logic. In the OnParameterSet lifecycle method, we condense all of the CSS responsibilities into a single variable ClassToRender (this name variable is optional). Next, using the CssBuilder we define what classes should be added to the builder and when they should be rendered. The pattern is as follows AddClass the CSS class and the condition when it should appear AddClass(value, when: bool). If the value is static, we can discard the when parameter. Finally, Build is called. All CSS classes are then combined into a single string, properly spaced and trimmed.

The refactored code becomes:

Component Source Markup (refactor)

<li class="bl-nav-item">
    <a onclick=@Activate class="@ClassToRender" role="button">
        @Title
    </a>
</li>

Component Source Logic (refactor)

protected override void OnParametersSet()
{
    ClassToRender = new CssBuilder(UserCss)
                        .AddClass("bl-nav-link")
                        .AddClass("bl-active", when: IsActive)
                        .AddClass("bl-disabled", when: Disabled)
                        .Build();
}

Dynamic values

If you encounter a dynamic value where some string is added to a CSS class name, we can easily handle this as well. Consider the CSS namespace bl- must be prefixed to a value SomeValue supplied by the component state or user input. This is easily handled with string interpolation ${var}.

protected override void OnParametersSet()
{
    ClassToRender = new CssBuilder(UserCss)
                        .AddClass("bl-nav-link")
                        .AddClass("bl-active", when: IsActive)
                        .AddClass("bl-disabled", when: Disabled)
			.AddClass("bl-${SomeValue}", when: IsConditionMet)
                        .Build();
}