ما هي طبقات التدرج (cascade layers) (@layer) وبدائل المحددات :is/:where؟

Question

Accepted Answer

هذه الميزات تعطيك التحكم الصريح في **التدرج (cascade)** و**الخصوصية (specificity)** — مما يهاجم مباشرة مشكلة حرب الخصوصية في قواعد الأكواد الكبيرة.

## @layer — تحديد ترتيب التدرج الصريح

`@layer` يسمح لك بتعريف طبقات مسماة يمكنك التحكم بترتيبها. الأنماط في الطبقة اللاحقة تتفوق على الطبقات السابقة **بغض النظر عن الخصوصية**:

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

القوة: أداة منخفضة الخصوصية في طبقة عالية يمكنها أن تتجاوز قاعدة عالية الخصوصية في طبقة منخفضة. هذا يعني أنك لا تحتاج إلى `!important` أو حيل المحددات لإدارة ترتيب التجاوز — تنظم CSS إلى طبقات (reset → framework → components → overrides) والترتيب يكون متوقعاً.

## :where() — خصوصية صفرية

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` يطابق الحجج الخاصة به لكنه يضيف **لا خصوصية** — مثالي للقيم الافتراضية/resets التي يمكن لأي أحد أن يتجاوزها بسهولة:

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — نفس المطابقة، تأخذ أعلى خصوصية

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` يختصر قوائم المحددات الطويلة (مثل `:where()`) لكنه **يساهم** في الخصوصية (تلك الخاصة بأكثر حجة خصوصية). لذا استخدم `:is()` للتجميع عندما تريد الوزن الطبيعي؛ `:where()` عندما تريده قابلاً للتجاوز.

## :is مقابل :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## لماذا يهم ذلك

معاً هذه تحل أصعب مشكلة في صيانة CSS — **الخصوصية غير المتحكم فيها**. `@layer` يجعل ترتيب التجاوز صريحاً ومقصوداً (لا مزيد من تصعيد `!important`)، `:where()` يكتب resets/defaults التي لا تقاتلك أبداً، و`:is()` يحافظ على المحددات المعقدة DRY.

هي أدوات أساسية لعمارة CSS قابلة للتوسع وودية للأطر.