使用CSS & Style Builder模式提升Blazor组件的样式构建效率

使用CSS & Style Builder模式提升Blazor组件的样式构建效率

在为ASP.NET Razor Components构建复杂组件时，经常需要结合多种因素生成CSS类。这些类可能由系统状态、组件状态、公共参数和静态基础CSS类共同决定。然而，这种方式并不利于扩展和理解。为了解决这个问题，我们引入了CSS Builder模式，它提供了一种易于重复使用、易于阅读的方法，适用于项目中的所有组件，是一种改善Razor Components中条件性CSS的清洁代码方法。

问题所在

让我们看一个例子：假设有一个Tab组件，其CSS类由多个来源设定。用户可以通过外部设置参数UserCss，组件有固定的基类bl-nav-link，以及根据Tab是否活动或禁用的状态而改变的bl-active和bl-disabled类。这样的实现方式导致CSS类的渲染分散在各个部分，维护起来十分困难。

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

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

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

解决方案：CSS Builder模式

通过CSS Builder模式，我们可以清理代码并将所有CSS相关的内容集中到单个关注点上。在OnParametersSet生命周期方法中，我们将所有的CSS责任合并到一个变量ClassToRender（名称可自定义）。然后，使用CssBuilder，我们可以明确地定义哪些类应该添加，何时添加。调用AddClass方法，传入CSS类名和一个布尔条件（如果是静态值，则可以忽略此参数）。最后调用Build方法，所有CSS类就会被组合成一个单一的字符串，整洁且无多余空格。

重构后的代码如下：

// 重构后组件源码
<li class="bl-nav-item">
    <a onclick=@Activate class="@ClassToRender" role="button">
        @Title
    </a>
</li>

// 重构后组件逻辑
protected override void OnParametersSet()
{
    ClassToRender = new CssBuilder(UserCss)
                        .AddClass("bl-nav-link")
                        .AddClass("bl-active", when: IsActive)
                        .AddClass("bl-disabled", when: Disabled)
                        .Build();
}

此外，还支持动态值处理、属性散列（Attribute Splatting）以及基于函数的条件判断等高级功能。

应用场景与优势

• 高效编码：CSS Builder模式将CSS类的构建逻辑集中在一处，提高代码可读性和可维护性。
• 灵活性：支持静态和动态CSS类，可以根据组件的状态或其他条件轻松添加或移除。
• 动态值处理：允许直接在CSS类中插入动态变量。
• 属性散列兼容：适配Blazor的属性散列特性，保证默认值的同时还能处理动态CSS属性。
• 简洁性：避免了不必要的条件语句，使代码更加精炼。

无论是初学者还是经验丰富的开发者，CSS Builder模式都能帮助您更有效地管理Blazor组件中的样式，并保持代码的整洁。现在就开始尝试这个开源项目，让您的组件开发更加得心应手！

查看完整API文档