איך בוחרים תחביר לקינון 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 כדרך להציב את ההקשר של & בכל מקום בתוך בורר חדש, למשל כשלא רק מוסיפים נושאים. היא גמישה ומינימלית, אבל צריך לזכור את @nest או &, בהתאם לתרחיש לדוגמה.

אפשרות 2: @nest restricted

זוהי חלופה מחמירה יותר, שמטרתה לצמצם את העלות שצוינה של זכירת שתי שיטות קינון. התחביר המוגבל הזה מאפשר קינון רק אחרי @nest, כך שאין דפוס נוח של הוספה בלבד. ההגדרה הזו מסירה את הדו-משמעות של הבחירה, ויוצרת דרך קלה לזכור את הקינון, אבל היא לא תמציתית כמו ההגדרה הקודמת.

אפשרות 3: סוגריים

כדי להימנע מהתחביר הכפול או מהעומס הנוסף שקשור להצעות @nest, Miriam Suzanne ו-Elika Etemad הציעו תחביר חלופי שמסתמך במקום זאת על סוגריים מסולסלים נוספים. השינוי הזה מספק תחביר ברור יותר, עם שני תווים נוספים בלבד, וללא כללי at חדשים. היא גם מאפשרת לקבץ כללים מוטמעים לפי סוג ההטמעה הנדרש, כדי לפשט כמה בוררים מוטמעים דומים.

דוגמה 1 – קינון ישיר

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

‫@nest always

.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 always

.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 always

.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 always

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 always

.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 always

.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 always

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 – קבוצת קינון מורכבת Kitchen Sink

@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 always

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 לתחביר שכולנו נכיר ונאהב!

למילוי הסקר