The E in BEM is now a part or decendent

Lets say we have a component named NavItem and inside of it we have an anchor item for the link. We have a CSS class name of NavItem for the component and A for the anchor.

Each component contains a class names list to which the component name is added. The class names from the Class parameter are added to these list. The @CssClass function returns a string of the CSS class names. On the outer div of the NavItem component we have:

<div class=”@CssClass(px-3)”>

This combines the class names in the class names list with the parameters. You could also add class names to the list with ClassNamesList.AddClass(className). The names list will contain the name of the component. So, the outer div will be:

<div class=”NavItem px-3”>

Inside of the NavItem component, we have a ComponentPart that has a separate class names list. Inside of NavItem we create an instance of ComponentPart named A.

ComponentPart A = CreateComponentPart(“A”);

This creates a separate ClassNames list for the A part. To render the A statement with the correct class names we have to use: @CssClass(A). The a statement inside NavItem will have a class name of NavItem-A. We can add additional class names to the A list or the NavItems list

<a class=”@CssClass(A,”px-3”)>

so during rendering we will have:

<a class=”A NavItem-A px-3” >

The Class parameter on a component can contain class names for the component and the part.

<NavItem Class=(“px-3 [A]px-3”)>

This will add the Bootstrap px-3 modifier class to components div and the A part. You just prefix the class with the part identifier [part name].

We have a helper function to make this shorter and to allow us to use short codes that will be explained in the next lesson.

<NavItem @ChildCss(“px-3”)>

The result used during rendering is:

<NavItem Class=(“px-3”)>

@inherits SuitComponentBase
<div class="@CssClass()">
    <A Class="@CssClass(A)" Href="@Href"  Title="@Title" SvgIcon="@SvgIcon">
        @if (ChildContent is not null )
        {
            @ChildContent;
        }
    </A>
</div>
@code {

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    [Parameter]
    public SvgIcon? SvgIcon { get; set; }
    [Parameter]
    public string? Href { get; set; }
    [Parameter]
    public string? Title { get; set; }
    private SuitComponentPart? A;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        A = CreateComponentPart("A");
    }
}

@inherits SuitComponentBase
@if (ChildContent is null) {
    <a href="@Href" class="@CssClass()">
        <span class="bi" aria-hidden="true">
           <Blazicon Svg="@SvgIcon"></Blazicon> @Title
        </span>
    </a>
} else
{
    <a href="Href" class="@CssClass()">
        @ChildContent
    </a>
}

@code {

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    [Parameter]
    public SvgIcon? SvgIcon { get; set; }
    [Parameter]
    public string? Href { get; set; }
    [Parameter]
    public string? Title { get; set; }
}