الشيء الوحيد الذي كان يزعجني دائمًا عند العمل مع Blazor هو مدى سهولة كسر الأنماط عبر المكونات عن طريق الخطأ. يمكنك إضافة فصل دراسي في مكون واحد وفجأة يبدو شيء آخر في صفحة مختلفة تمامًا. اتضح أن Blazor لديه حل مدمج لهذا: عزل CSS.

ما هو عزل CSS؟

يتيح لك عزل CSS نطاق الأنماط لمكون معين. يقوم Blazor بذلك عن طريق إنشاء سمة فريدة لكل مكون في وقت الإنشاء وإلحاقها بمحددات CSS. لذلك تنطبق أنماطك فقط على المكون الذي تنتمي إليه.

لا حاجة لتسمية BEM، ولا حاجة لاختراقات خصوصية مجنونة. فقط CSS نظيف ومحدد النطاق.

#طريقة استخدامه

لنفترض أن لديك مكونًا يسمى Card.razor:

<div class="card">
    <h3 class="card-title">@Title</h3>
    <p class="card-body">@ChildContent</p>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

لإضافة أنماط معزولة، ما عليك سوى إنشاء ملف بنفس الاسم ولكن بامتداد .razor.css. في هذه الحالة: Card.razor.css.

.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--color-bg-secondary);
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-body {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

وهذا كل شيء! سوف يلتقطه Blazor تلقائيًا ويوسع نطاق هذه الأنماط إلى مكون Card فقط. إذا كان لديك فصل .card آخر في مكان آخر، فلن يتأثر.

#كيف يعمل تحت غطاء محرك السيارة

عندما تقوم بإنشاء مشروعك، يقوم Blazor بإعادة كتابة HTML وCSS. يحصل المكون الخاص بك على سمة فريدة مثل b-3x8qz7k2f1، ويتم إلحاق محددات CSS بهذه السمة:

.card[b-3x8qz7k2f1] {
    border: 1px solid var(--color-border);
    /* ... */
}

يتم تقديم حزمة CSS التي تم إنشاؤها كـ {ProjectName}.styles.css. تأكد من وجود هذا في index.html أو _Host.cshtml:

<link href="YourApp.styles.css" rel="stylesheet" />

إذا كنت تفتقد هذا الرابط، فلن تظهر أنماطك المعزولة وستقضي 30 دقيقة تتساءل عما يحدث. ثق بي، لقد كنت هناك.

استهداف العناصر الفرعية

شيء واحد يجب أخذه في الاعتبار هو أنه افتراضيًا، ينطبق CSS المعزول فقط على عناصر المكون الحالي. إذا كنت تريد تصميم العناصر داخل مكون فرعي، فأنت بحاجة إلى أداة الدمج ::deep:

::deep .child-element {
    color: red;
}

هذا يخبر Blazor بتطبيق النمط على العناصر المطابقة داخل المكونات الفرعية أيضًا. مفيد جدًا عندما يكون لديك مكون مجمع يحتاج إلى تصميم أبنائه.

#متى يتم استخدامه

أستخدم عزل CSS لكل مكون تقريبًا الآن. إنها تحافظ على الأشياء نظيفة ويمكن التنبؤ بها. المرة الوحيدة التي لا أستخدمها فيها هي للأنماط العالمية مثل عمليات إعادة التعيين أو الطباعة أو متغيرات السمات - تلك التي تدخل في ملف CSS مشترك.

آمل أن تكونوا قد أحببت هذا المنصب! لا تتردد في الاتصال بي على أي وسائل التواصل الاجتماعي على **@emimontesdeoca **.

الموارد

• عزل ASP.NET Core Blazor CSS