الدمج

يمكن أن يؤدي تضمين قواعد أنماط CSS إلى تنظيم أوراق الأنماط بشكل أفضل وتسهيل قراءتها وصيانتها.

نظرة عامة

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

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

سيكون ذلك مماثلاً لكتابة كل نمط على حدة:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

يمكن أن يكون التداخل بعدد الطبقات التي تحتاج إليها.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

التجميع وإنشاء العلاقات

تتيح لك عملية التضمين تجميع قواعد الأنماط وإنشاء علاقات بينها بشكل أكثر اختصارًا.

ستكون القاعدة المتداخلة مرتبطة تلقائيًا بالقاعدة الخارجية كـ أداة ربط تابعة. استخدِم أدوات الاختيار في القواعد المتداخلة لتغيير العلاقات.

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

تحديد العلاقات الضمنية باستخدام أداة الاختيار &

يمكنك أيضًا استخدام أداة الاختيار & لتكون أكثر وضوحًا عند تضمين قواعد الأنماط. يمكن اعتبار & رمزًا يمثّل أداة اختيار العنصر الرئيسي.

.feature {
 & button {
    color: blue;
  }
}

سيكون هذا مكافئًا لكتابة الأنماط على النحو التالي:

.feature button {
  color: blue;
}

عندما يكون & مطلوبًا

بدون &، ستكون أدوات الاختيار المدمجة أدوات اختيار تابعة لأداة الاختيار الرئيسية. لتكوين مُحدّدات مركّبة، يجب استخدام & .

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

يمكنك أيضًا تغيير السياق ووضع أداة الاختيار & في نهاية أداة اختيار العنصر التابع أو على جانبيها.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

في المثال الأخير، نضيف أنماطًا للصور داخل عنصر يحمل الفئة .my-component. يمكن أن يكون هذا مفيدًا إذا كنت تعمل على مشروع لا يمكنك فيه إضافة class أو id إلى عنصر.

التداخل والتحديد

على غرار :is()، يأخذ محدد التداخل درجة التحديد الخاصة بالمحدد الذي يتمتع بأعلى درجة تحديد في قائمة محددات العنصر الرئيسي.

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

يستهدف القانون الأول جميع الروابط داخل العنصرَين #main-header و.intro، ويمنحها اللون الأخضر.

تحاول القاعدة الثانية إلغاء ذلك لجعل الروابط داخل العنصر .intro باللون الأزرق.

يمكننا معرفة سبب عدم نجاح ذلك إذا نظرنا إلى مدى تحديد كل قاعدة.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

بما أنّ القاعدة الأولى تتضمّن id في قائمة المحددات، وبما أنّ القواعد المتداخلة تأخذ خصوصية المحدد الذي يتمتّع بأعلى خصوصية، فإنّ القاعدة الأولى تتمتّع بخصوصية أعلى من القاعدة الثانية. تظهر الروابط باللون الأخضر حتى لعناصر a التي لا تكون داخل عنصر يتضمّن محدّد #main-header.

التداخل غير صالح

على غرار :is()، لا يمكن لمحدّد التداخل تمثيل العناصر الزائفة.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

من المفترض أن يكون لكل من blockquote وعناصره الزائفة نص وحدود باللون navy، ولكن هذا ليس هو الحال. بما أنّ المحدّد & لا يمكنه تمثيل العناصر الزائفة، لن يتم تطبيق أنماط الحدود المتداخلة إلا على blockquote.

عند إنشاء أدوات اختيار مركّبة باستخدام & وأدوات اختيار النوع، يجب أن تأتي أداة اختيار النوع أولاً بدون أي مسافة بيضاء بينها.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

تسمح هذه القاعدة بتداخل CSS مع أدوات المعالجة المسبقة، مثل Sass. في Sass، يؤدي كتابة &p إلى إلحاق أداة اختيار العنصر الرئيسي بأداة اختيار النوع المتداخل، وستكون النتيجة .featurep.

قواعد at المتداخلة

يمكن أيضًا تضمين قواعد المجموعات الشرطية في خدمة مقارنة الأسعار (CSS)، مثل @container و@media و@supports و@layer.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

التحقّق من فهمك