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

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

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