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

دو نحو رقیب به کمک شما برای تعیین اینکه کدام یک باید از طریق یک نامزد مشخصات دفاع شود، نیاز دارند.

Adam Argyle

Miriam Suzanne

تودرتوی CSS یک ترکیب دستوری آسان است که به 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() ندارد، اما تودرتوی پیچیده تر به این نیاز دارد. مثال شماره 3 را برای یک مقدمه ساده برای لیست های انتخابگر و تودرتو ببینید. تصور کنید که لیست انتخابگر به جای اینکه در ابتدا باشد در وسط یک انتخابگر قرار داشته باشد، در این موارد برای گروه بندی انتخابگرها در وسط یک انتخابگر دیگر :is() مورد نیاز است.
   

مروری بر آنچه که ما مقایسه می کنیم

ما می‌خواهیم تودرتوی CSS را درست انجام دهیم، و با این روحیه، جامعه را نیز شامل می‌کنیم. بخش های زیر به توصیف سه نسخه احتمالی که در حال ارزیابی هستیم کمک می کند. سپس به چند نمونه از کاربردها برای مقایسه می پردازیم، و در پایان یک نظرسنجی ساده از شما می پرسد که به طور کلی کدام را ترجیح می دهید.

گزینه 1: @nest

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

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

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

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

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

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

@لانه

.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 - تودرتو مرکب

@لانه

.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 - لیست های انتخابگر و تودرتو

@لانه

.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 - سطوح چندگانه

@لانه

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 - لانه سازی والدین یا تغییر موضوع

@لانه

.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 - اختلاط لانه مستقیم و والد

@لانه

.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 همیشه (همیشه صریح است)

.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 - گروه های تودرتو

@لانه

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 - گروه تودرتو پیچیده "سینک آشپزخانه"

@لانه

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

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