پرش به محتویات

لایه آبشاری (Cascade layer)

specificity استایل‌های پیش‌فرض Bricks همیشه تعادل ظریفی بوده است. اگرچه هدف ما نگه‌داشتن این استایل‌ها تا حد ممکن غیرمزاحم و به‌عنوان بوم خالی برای ساخت است، رسیدن به این هدف فقط با specificity سلکتور محدودیت دارد. در برخی موارد برای کاربران سخت بوده حتی وقتی می‌خواهند، سلکتورهای خاصی را override کنند.

Bricks 1.12 راه‌حل امیدوارکننده‌ای برای این مسئله قدیمی‌با CSS cascade layers معرفی کرد — که تا دسامبر ۲۰۲۴ به پشتیبانی ۹۶٪ مرورگر و وضعیت Baseline «Widely available» رسیده است.

از Bricks 2.0 این قابلیت به‌طور پیش‌فرض فعال است. می‌توانید آن را از بریکس (Bricks) > تنظیمات (Settings) > Performance > Cascade layer غیرفعال کنید، اگرچه توصیه نمی‌شود.

این قابلیت از cascade layers استفاده می‌کند تا تعامل استایل‌های پیش‌فرض Bricks با سایر استایل‌های صفحه را تعریف کند.

نحوه کار

این قابلیت دو cascade layer معرفی می‌کند:

  • bricks.reset (لایه با اولویت پایین‌تر): این زیرلایه خالی است و برای کاربران پیشرفته یک safety net فراهم می‌کند. خود Bricks هیچ استایلی در این لایه اعمال نمی‌کند.
  • bricks: این لایه همه استایل‌های پیش‌فرض Bricks را شامل می‌شود و override آن‌ها با استایل‌های بدون لایه یا لایه‌های تعریف‌شده توسط کاربر با اولویت بالاتر آسان‌تر می‌شود.

مثالی برای نشان‌دادن مشکل و راه‌حل:

مشکل: Specificity سلکتور

در استایل‌های پیش‌فرض Bricks، الگوی رایجی ممکن است این‌طور باشد:

[class*="brxe-"] {
    max-width: 100%;
}

اگر بخواهید با سلکتور عمومی‌تری مثل این override کنید:

div {
    max-width: 400px;
}

…override کار نمی‌کند چون specificity سلکتور attribute [class*="brxe-"] از div بالاتر است.

یک workaround ممکن wrap کردن سلکتورهای attribute Bricks در :where() برای کاهش specificity باشد:

:where([class*="brxe-"]) {
    max-width: 100%;
}

با این حال این رویکرد نیاز به wrap کردن هر سلکتور دارد که هم پیچیده است هم در مقیاس بزرگ غیرعملی.

راه‌حل: Cascade layers

با cascade layers می‌توانیم استایل‌های پیش‌فرض را ساده در لایه‌ای به نام bricks تعریف کنیم.

استایل‌های خارج از این لایه (بدون لایه) یا در لایه با اولویت بالاتر به‌طور خودکار بر استایل‌های پیش‌فرض Bricks اولویت دارند.

ساختار لایه‌ها این‌طور است:

@layer bricks.reset;

@layer bricks {
    [class*="brxe-"] {
        max-width: 100%;
    }
    /* Other default Bricks styles */
}

حالا وقتی استایل خود را خارج از لایه bricks اضافه می‌کنید، مثل:

div {
    max-width: 400px;
}

…بر استایل‌های پیش‌فرض Bricks اولویت دارند چون استایل‌های بدون لایه و لایه‌های با اولویت بالاتر — بدون توجه به سلکتور — جلوتر هستند.

نقش bricks.reset

زیرلایه bricks.reset انعطاف هنگام override استایل‌های پیش‌فرض Bricks را تضمین می‌کند.

معمولاً استایل‌های لایه bricks override آسان‌اند، اما اگر استایل پیش‌فرض از !important استفاده کند، ترتیب cascade معکوس می‌شود و override با استایل بدون لایه یا لایه‌های با اولویت بالاتر سخت‌تر می‌شود. درباره این رفتار اینجا بیشتر بخوانید.

لایه bricks.reset با اولویت پایین‌تر fallback برای تعریف امن استایل سفارشی در این موارد نادر است. هدف ما اجتناب از !important در استایل‌های پیش‌فرض مگر کاملاً ضروری باشد، اما این زیرلایه به‌عنوان safeguard وجود دارد.

چرا مهم است

با انتقال استایل‌های پیش‌فرض Bricks به cascade layer اختصاصی:

  1. Override آسان‌تر: استایل‌های بدون لایه یا لایه‌های با اولویت بالاتر می‌توانند استایل‌های پیش‌فرض را بدون جنگ specificity override کنند.
  2. نگهداری ساده‌تر: به‌جای دستکاری specificity هر سلکتور، cascade layers راه‌حل تمیز و مقیاس‌پذیر ارائه می‌دهد.

منابع