.NET Reduce duplicate code for styling elements with the same set of classes

Viewed 10

I have a .NET 6 application where I am using the same set of Bootstrap classes to style cards across multiple views.

In a single view containing multiple cards, I am placing the classes inside variables to reduce duplicate code for the view.

E.g.

{
    var card = "card h-100";
    var cardHeader = "card-header d-flex justify-content-between align-items-center bg-light-lighten header-title text-info pb-2 pt-2 px-3";  
    var cardBody = "card-body pt-2 pb-0";

    var detailRow = "row mb-2";
    var detailLabel = "col-4 col-md-3 col-lg-4 font-weight-bold";
    var detailValue = "col";
}

<div class="@card">
    <h4 class="@cardHeader">
        Details
        <a class="@cardHeaderBtn"></a>
    </h4>
    <div class="@cardBody">
        <div class="@detailRow">
            <div class="@detailLabel">Status</div>
            <div class="@detailValue">@Model.Status</div>
        </div>
        <div class="@detailRow">
            <div class="@detailLabel">Order No</div>
            <div class="@detailValue">@Model.OrderNo</div>
        </div>
        <div class="@detailRow">
            <div class="@detailLabel">Buyer</div>
            <div class="@detailValue">@Model.BuyerBusinessName</div>
        </div>
    </div>
</div>

<div class="@card">
    <h4 class="@cardHeader">Finance & Units</h4>
    <div class="@cardBody">
        <div class="@detailRow">
            <div class="@detailLabel">Buying</div>
            <div class="@detailValue">@Model.BuyExchangeRate</div>
        </div>
        <div class="@detailRow">
            <div class="@detailLabel">Selling</div>
            <div class="@detailValue">@Model.SellExchangeRate</div>
        </div>
    </div>
</div>

I'm sure there is a better way to style all my cards across different views without duplicating the variables code into them, but I am having trouble finding the right keywords to search for what that might be!

What is the best way to reduce duplicate code when it comes to styling elements with the same set of bootstrap classes?

Thank you very much in advance.

0 Answers
Related