به انتخاب یک نحو برای تودرتوی CSS کمک کنید

دو سینتکس رقیب به کمک شما نیاز دارند تا مشخص کنید کدام یک باید از طریق یک کاندیدای مشخصات، پشتیبانی شود.

آدام آرگایل
میریام سوزان

CSS Nesting یک سینتکس اضافی برای راحتی است که به CSS اجازه می‌دهد درون یک مجموعه قوانین اضافه شود. اگر از SCSS ، Less یا Stylus استفاده کرده باشید، مطمئناً چند نمونه از این مورد را دیده‌اید:

.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 nesting را به درستی انجام دهیم و با این هدف، جامعه را نیز در نظر می‌گیریم. بخش‌های بعدی به توصیف سه نسخه ممکن که در حال ارزیابی آنها هستیم، کمک می‌کند. سپس چند نمونه از کاربردها را برای مقایسه بررسی خواهیم کرد و در پایان یک نظرسنجی ساده از شما پرسیده خواهد شد که در کل کدام را ترجیح می‌دهید.

گزینه ۱: @nest

این سینتکس مشخص‌شده‌ی فعلی در CSS Nesting 1 است. این سینتکس روشی مناسب برای اضافه کردن استایل‌های تودرتو با شروع انتخابگرهای تودرتوی جدید با & ارائه می‌دهد. همچنین @nest را به عنوان راهی برای قرار دادن & context در هر جایی درون یک انتخابگر جدید ارائه می‌دهد، مانند زمانی که فقط موضوعات را اضافه نمی‌کنید. این سینتکس انعطاف‌پذیر و مینیمال است، اما به قیمت نیاز به یادآوری @nest یا & بسته به مورد استفاده شما.

گزینه ۲: @nest محدود شده است

این یک جایگزین سختگیرانه‌تر است، در تلاشی برای کاهش هزینه ذکر شده در مورد به خاطر سپردن دو روش تودرتو. این سینتکس محدود فقط اجازه می‌دهد که تودرتوسازی پس از @nest رخ دهد، بنابراین هیچ الگوی راحتی append only وجود ندارد. ابهام انتخاب را از بین می‌برد، یک روش آسان برای به خاطر سپردن تودرتو ایجاد می‌کند، اما اختصار را به نفع قرارداد فدا می‌کند.

گزینه ۳: براکت

برای جلوگیری از سینتکس دوگانه یا شلوغی اضافی که در پیشنهادهای @nest وجود دارد، میریام سوزان و الیکا اعتماد یک سینتکس جایگزین پیشنهاد دادند که به جای آن به براکت‌های اضافی متکی است. این سینتکس، با تنها دو کاراکتر اضافی و بدون هیچ at-rules جدید، وضوح سینتکس را فراهم می‌کند. همچنین به قوانین تو در تو اجازه می‌دهد تا بر اساس نوع تو در تو بودن مورد نیاز، به عنوان راهی برای ساده‌سازی چندین انتخابگر تو در تو مشابه، گروه‌بندی شوند.

مثال ۱ - تودرتوسازی مستقیم

@لانه 

.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;
}

مثال ۲ - تودرتوسازی مرکب

@لانه 

.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;
}

مثال ۳ - لیست‌های انتخابگر و تودرتوسازی

@لانه 

.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;
}

مثال ۴ - سطوح چندگانه

@لانه 

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;
}

مثال ۵ - جایگذاری والد یا تغییر موضوع

@لانه 

.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;
}

مثال ۶ - ترکیب تودرتوی مستقیم و والد

@لانه 

.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 - تودرتو کردن کوئری رسانه‌ای

@لانه 

.foo {
  display: grid;

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

یا به صراحت / گسترش یافته 

.foo {
  display: grid;

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

‎@nest always (همیشه صریح است) 

.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;
  }
}

مثال ۸ - گروه‌بندی تودرتو

@لانه 

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;
}

مثال ۹ - گروه تودرتوی پیچیده "سینک آشپزخانه"

@لانه 

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 به سینتکسی که همه ما آن را خواهیم شناخت و دوست خواهیم داشت، کمک می‌کنید!

در نظرسنجی شرکت کنید!