المساعدة في اختيار بنية لتداخل CSS

هناك بناء جملة متنافس يحتاجان إلى مساعدتك في تحديد أيهما يجب دعمه للمرشح للمواصفات.

آدم أرجيل

Twitter GitHub

ميريام سوزان

Twitter

تداخل CSS هو إضافة بنية ملائمة تسمح بإضافة CSS داخل مجموعة القواعد. إذا كنت قد استخدمت SCSS أو أقل أو قلم الشاشة، فلا شك أنك لاحظت بعض النكهات التالية:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

والتي بعد تجميعها إلى CSS عادي بواسطة المعالج الأولي، يتم تحويلها إلى CSS عادي على النحو التالي:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

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

لماذا لا يمكن أن يكون مثال التداخل الدقيق الموضح أعلاه عبارة عن بنية تداخل CSS؟

هناك بضعة أسباب لعدم إمكانية استخدام بنية التداخل الأكثر شيوعًا كما هي:

1. التحليل الغامض
   قد تبدو بعض أدوات الاختيار المدمَجة تشبه تمامًا المواقع الإلكترونية والمعالجات المسبقة بإمكانية حلها وإدارتها في وقت الإصدار. لن تمتلك محرّكات المتصفّح الخصائص نفسها، لذا يجب عدم فهم أدوات الاختيار على الإطلاق.
   

2. التعارضات بشأن تحليل ما قبل المعالج
   يجب ألا تؤدي طريقة CSS الخاصة بالدمج إلى تعطُّل المعالجات التمهيدية أو عمليات دمج المطوّرين الحالية لمهام سير العمل الحالية. سيكون ذلك مزعجًا وغير مراعي لتلك المنظومات البيئية والمجتمعات.
   

3. في انتظار :is()
   لا يحتاج التداخل الأساسي إلى :is()، إلا أن التداخل الأكثر تعقيدًا يحتاج إليه. راجِع المثال الثالث للاطّلاع على مقدمة موجزة عن قوائم أدوات الاختيار والتداخل. لنفترض أنّ قائمة أدوات الاختيار كانت في منتصف أداة الاختيار بدلاً من تلك التي كانت في البداية. يكون :is() في تلك الحالات مطلوبًا لتجميع أدوات الاختيار في منتصف أداة اختيار أخرى.
   

نظرة عامة على الميزات التي نقارنها

نريد إجراء تداخل في CSS بشكل صحيح، ومن هذا المنطلق نضمِّن المنتدى. ستساعدك الأقسام التالية في وصف الإصدارات الثلاثة المحتملة التي نقيّمها. سنستعرض بعد ذلك بعض أمثلة الاستخدام للمقارنة، وفي النهاية سيكون هناك استبيان بسيط يسألك عما تفضله بشكل عام.

الخيار 1: @nest

هذه هي البنية المحدّدة الحالية في تداخل CSS 1. توفّر هذه الميزة طريقة ملائمة لدمج الأنماط من خلال بدء أدوات اختيار مدمجة جديدة باستخدام &. ويقدّم أيضًا السمة @nest كوسيلة لوضع سياق & في أي مكان داخل أداة اختيار جديدة، مثلاً عندما لا تُضيف مواضيع فقط. وهو مرن وبسيط ولكن في حساب الحاجة لتذكر @nest أو & بناءً على حالة الاستخدام.

الخيار 2: حظر @nest

يعد هذا بديلاً أكثر صرامة، في محاولة لخفض النفقات المذكورة في تذكر طريقتين للتداخل. تسمح هذه البنية المحدودة بحدوث التداخل بعد @nest فقط، لذلك لا يوجد نمط ملائم للإلحاق فقط. إزالة غموض الاختيار، وإنشاء طريقة يسهل تذكرها للتداخل، ولكن التضحية بالإرهاق لصالح الاصطلاح.

ملاحظة: من الجدير بالذكر أن بنية @nest الأقل تقييدًا (الخيار 1) يمكن أن تستخدم linter لفرض قاعدة استخدام على مستوى الفريق، في حال قرر الفريقان أنهما لا يحبان الغموض أو عدم وضوح النص. قد يكون تغيير المواصفات تدبيرًا كبيرًا.

الخيار 3: الأقواس

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

مثال 1 - التداخل المباشر

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest دائمًا

.foo {
  color: #111;

  @nest & .bar {
    color: #eee;
  }
}

أقواس

.foo {
  color: #111;

  {
    & .bar {
      color: #eee;
    }
  }
}

لغة CSS المكافئة

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

مثال 2 - التداخل المركّب

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest دائمًا

.foo {
  color: blue;

  @nest &.bar {
    color: red;
  }
}

أقواس

.foo {
  color: blue;

  {
    &.bar {
      color: red;
    }
  }
}

لغة CSS المكافئة

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

المثال 3 - قوائم أداة الاختيار والتداخل

@nest

.foo, .bar {
  color: blue;

  & + .baz,
  &.qux {
    color: red;
  }
}

@nest دائمًا

.foo, .bar {
  color: blue;

  @nest & + .baz,
  &.qux {
    color: red;
  }
}

أقواس

.foo, .bar {
  color: blue;

  {
    & + .baz,
    &.qux {
      color: red;
    }
  }
}

لغة CSS المكافئة

.foo, .bar {
  color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
  color: red;
}

المثال 4 - مستويات متعددة

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

    & > p {
      font-size: .9rem;
    }
  }
}

@nest دائمًا

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

    @nest & > p {
      font-size: .9rem;
    }
  }
}

أقواس

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

      {
        & > p {
          font-size: .9rem;
        }
      }
    }
  }
}

لغة CSS المكافئة

figure {
  margin: 0;
}

figure > figcaption {
  background: hsl(0 0% 0% / 50%);
}

figure > figcaption > p {
  font-size: .9rem;
}

مثال 5 - تداخل الوالدين أو تغيير الموضوع

@nest

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

@nest دائمًا

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

أقواس

.foo {
  color: red;

  {
    .parent & {
      color: blue;
    }
  }
}

لغة CSS المكافئة

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

المثال 6 - مزج التداخل المباشر مع التداخل الرئيسي

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest دائمًا

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    @nest &.baz {
      color: green;
    }
  }
}

أقواس

.foo {
  color: blue;

  {
    .bar & {
      color: red;

      {
        &.baz {
          color: green;
        }
      }
    }
  }
}

لغة CSS المكافئة

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

.bar .foo.baz {
  color: green;
}

مثال 7 - تداخل الاستعلام عن الوسائط

@nest

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

أو صراحةً / موسعًا

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

@nest دائمًا (دوامًا صريحًا)

.foo {
  display: grid;

  @media (width => 30em) {
    @nest & {
      grid-auto-flow: column;
    }
  }
}

أقواس

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

أو صراحةً / موسعًا

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

لغة CSS المكافئة

.foo {
  display: grid;
}

@media (width => 30em) {
  .foo {
    grid-auto-flow: column;
  }
}

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

مثال 8 - مجموعات التداخل

@nest

fieldset {
  border-radius: 10px;

  &:focus-within {
    border-color: hotpink;
  }

  & > legend {
    font-size: .9em;
  }

  & > div {
    & + div {
      margin-block-start: 2ch;
    }

    & > label {
      line-height: 1.5;
    }
  }
}

@nest دائمًا

fieldset {
  border-radius: 10px;

  @nest &:focus-within {
    border-color: hotpink;
  }

  @nest & > legend {
    font-size: .9em;
  }

  @nest & > div {
    @nest & + div {
      margin-block-start: 2ch;
    }

    @nest & > label {
      line-height: 1.5;
    }
  }
}

أقواس

fieldset {
  border-radius: 10px;

  {
    &:focus-within {
      border-color: hotpink;
    }
  }

  > {
    legend {
      font-size: .9em;
    }

    div {
      + div {
        margin-block-start: 2ch;
      }

      > label {
        line-height: 1.5;
      }
    }}
  }
}

لغة CSS المكافئة

fieldset {
  border-radius: 10px;
}

fieldset:focus-within {
  border-color: hotpink;
}

fieldset > legend {
  font-size: .9em;
}

fieldset > div + div {
  margin-block-start: 2ch;
}

fieldset > div > label {
  line-height: 1.5;
}

مثال 9 - مجموعة التداخل المعقدة "حوض المطبخ"

@nest

dialog {
  border: none;

  &::backdrop {
    backdrop-filter: blur(25px);
  }

  & > form {
    display: grid;

    & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

@nest دائمًا

dialog {
  border: none;

  @nest &::backdrop {
    backdrop-filter: blur(25px);
  }

  @nest & > form {
    display: grid;

    @nest & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

أقواس

dialog {
  border: none;

  {
    &::backdrop {
      backdrop-filter: blur(25px);
    }

    & > form {
      display: grid;

      {
        & > :is(header, footer) {
          align-items: flex-start;
        }
      }
    }
  }

  {
    html:has(&[open]) {
      overflow: hidden;
    }
  }
}

لغة CSS المكافئة

dialog {
  border: none;
}

dialog::backdrop {
  backdrop-filter: blur(25px);
}

dialog > form {
  display: grid;
}

dialog > form > :is(header, footer) {
  align-items: flex-start;
}

html:has(dialog[open]) {
  overflow: hidden;
}

وقت التصويت

نأمل أن تشعر أنها كانت مقارنة عادلة وعينة من خيارات بناء الجملة التي نقيّمها. يرجى مراجعتها بعناية وإعلامنا بالجانب الذي تفضله أدناه. ونقدّر جهودك لمساعدتنا في تحسين تداخل CSS مع بنية تعرّفنا عليها ونحبها جميعًا.

بدء استطلاع الرأي