CSS Nesting: מדריך מקיף עם דוגמאות

ניתן לומר ש- CSS Nesting הוא סוג של מהפכה באופן בו מפתחים כותבים CSS בכך שהוא מאפשר לכללי CSS לשקף ישירות את המבנה ההיררכי של HTML. לא רק שהשימוש ב CSS Nesting משפר את קריאות הקוד, אלא גם מאפשר תחזוקה פשוטה יותר של הקוד, במיוחד בפרויקטים מורכבים עם אלמנטים המקוננים עמוק.

האפשרות של קיבוץ סגנונות CSS הקשורים לוגית אחד לשני מאפשרת להפחית כפילויות ומוודאת שקוד ה CSS שלכם יהיה מאורגן בצורה לוגית. בפוסט זה אסביר כיצד להשתמש ב Native CSS Nesting, אך לפני שנצלול לדוגמאות מעשיות, חשוב להבין את הסימנים והאופרטורים הבסיסיים שמניעים את CSS Nesting.

הבנת סימנים בסיסיים ב- CSS Nesting

CSS Nesting כולל מספר סימנים מרכזיים הקובעים כיצד סלקטורים ומאפיינים מיושמים. הנה הסבר על סימנים אלו:

1. הסימן & (Ampersand)

הסימן & מייצג את סלקטור ההורה הנוכחי בחוקים מקוננים. הוא משמש כ- placeholder המאפשר להוסיף סלקטורים נוספים או פסאודו-מחלקות (pseudo-classes) לאותו הורה.

HTML:

<div class="container">
  <div class="child">תוכן ילד</div>
</div>

CSS Nesting:

.container {
  & .child {
    color: blue;
  }

  &:hover {
    background-color: yellow;
  }
}

CSS רגיל:

.container .child {
  color: blue;
}

.container:hover {
  background-color: yellow;
}

הסבר:

• & .child מטרגט את האלמנטים מסוג .child בתוך .container.
• &:hover מטרגט את מצב ה- hover של .container.

2. הסימן < (קומבינטור של ילד ישיר)

הסימן > משמש לבחירת ילדים ישירים של הסלקטור הנוכחי בלבד. באמצעות סימן זה ניתן להבטיח כי סגנונות ה CSS יחולו רק על ילדים ישירים ולא על צאצאים שלהם המקוננים עמוק יותר.

HTML:

<ul class="list">
  <li class="item">
    פריט 1
    <ul class="sub-item">
      <li>תת-פריט 1</li>
    </ul>
  </li>
</ul>

CSS Nesting:

.list {
  > .item {
    padding: 10px;

    > .sub-item {
      padding: 5px;
    }
  }
}

CSS רגיל:

.list > .item {
  padding: 10px;
}

.list > .item > .sub-item {
  padding: 5px;
}

הסבר:

• > .item מסמן רק את .item שהם ילדים ישירים של .list.

3. פסאודו-מחלקות ופסאודו-אלמנטים

ניתן לקנן פסאודו-מחלקות (כמו :hover, :focus) ופסאודו-אלמנטים (כמו ::after, ::before) בתוך חוקי CSS כדי לעצב states או אלמנטים מסוימים. שימו לב שניתן לשלב קינון גם עם פסאודו-מחלקות מתקדמות כמו הסלקטור :has שמאפשר לבחור אלמנטים על בסיס הצאצאים שלהם.

ב ״states״ אנו מתכוונים למצבים כמו hover, focus וכדומה…

HTML:

<button class="button">לחצו כאן</button>

CSS Nesting:

.button {
  &:hover {
    background-color: green;
  }

  &::after {
    content: '✔';
    color: red;
  }
}

CSS רגיל:

.button:hover {
  background-color: green;
}

.button::after {
  content: '✔';
  color: red;
}

4. Media Queries מקוננים

ניתן לקנן Media Queries בתוך סלקטור כדי להגדיר סגנונות רספונסיביים המקובצים קונטקסטואלית.

HTML:

<div class="card">כרטיס רספונסיבי</div>

CSS Nesting:

.card {
  padding: 16px;

  @media (min-width: 768px) {
    padding: 24px;
  }
}

CSS רגיל:

.card {
  padding: 16px;
}

@media (min-width: 768px) {
  .card {
    padding: 24px;
  }
}

תחביר מרוכך – Relaxed Syntax

כאשר CSS Nesting הוצג לראשונה, הסימן & היה נדרש לפני סלקטורים של סוגי אלמנטים. המשמעות הייתה שהיה צריך לכתוב & h1 במקום סתם h1 בתוך חוק מקונן. נכון לסוף 2023, כל הדפדפנים המרכזיים תומכים ב-תחביר מרוכך (Relaxed Syntax) שמסיר הגבלה זו.

כלומר, כעת ניתן לכתוב:

.card {
  h1 {
    font-size: 1.5rem;
  }

  p {
    color: gray;
  }
}

במקום הדרישה הקודמת:

.card {
  & h1 {
    font-size: 1.5rem;
  }

  & p {
    color: gray;
  }
}

הסימן & עדיין שימושי כאשר אתם צריכים למקם את סלקטור ההורה במיקום מסוים, כמו הוספת מחלקה (&.active) או היפוך סדר הסלקטורים (.dark &). אך עבור סלקטורים פשוטים של צאצאים, ניתן להשמיט אותו לחלוטין.

CSS Nesting וספציפיות

פרט חשוב שיש להבין הוא כיצד CSS Nesting משפיע על ספציפיות (Specificity). סלקטור הקינון & מחשב ספציפיות באותו אופן כמו הפסאודו-מחלקה :is() – הוא לוקח את הספציפיות הגבוהה ביותר מרשימת הסלקטורים המשויכת.

לדוגמה:

#header, .nav {
  & a {
    color: blue;
  }
}

למרות של-.nav ספציפיות של 0-1-0, החוק המקונן יורש את הספציפיות של #header (1-0-0) מכיוון שסלקטור ה-& משתמש בספציפיות הגבוהה ביותר ברשימה. הספציפיות הסופית של & a היא 1-0-1.

זכרו זאת כאשר אתם מנפים באגים של קונפליקטי ספציפיות בחוקים מקוננים.

At-Rules מקוננים נוספים

מעבר ל-@media, ניתן לקנן at-rules נוספים בתוך בלוק סלקטור. גישה זו שומרת על סגנונות קשורים מקובצים יחד:

.grid {
  display: grid;

  @supports (display: subgrid) {
    grid-template-columns: subgrid;
  }

  @container (min-width: 400px) {
    grid-template-columns: 1fr 1fr;
  }

  @layer utilities {
    &.hidden {
      display: none;
    }
  }
}

גישה זו שומרת את כל הסגנונות של .grid במקום אחד, ללא קשר אם הם תלויים בתמיכת פיצ'ר, גודל container, או שכבות cascade. לעוד at-rule שמרחיב custom properties עם טיפוסים ואנימציות חלקות, ראו את המדריך לתכונת @property ב-CSS.

טעויות נפוצות וטיפים לשימוש נכון

כאשר מתחילים לעבוד עם CSS Nesting, קל ליפול לכמה מלכודות. בואו נראה את הנפוצות שבהן:

1. קינון עמוק מדי – אחת הטעויות הנפוצות ביותר היא קינון של חוקים ברמות עומק רבות. קינון של 3-4 רמות ומעלה יוצר סלקטורים ארוכים ומורכבים שקשה לתחזק. כלל אצבע טוב הוא להגביל את עומק הקינון ל-2-3 רמות לכל היותר.

2. שכפול מיותר של הסימן & – מכיוון שהתחביר המרוכך מאפשר להשמיט את & עבור סלקטורים פשוטים של צאצאים, אין צורך להוסיף אותו בכל מקום. השתמשו ב-& רק כשאתם צריכים לצרף ישירות לסלקטור ההורה (כמו &:hover או &.active).

3. בלבול עם תחביר Sass – אם הגעתם מ-Sass, שימו לב שיש הבדלים. ב-Sass, & יכול לשמש גם ליצירת שמות סלקטורים חדשים (למשל &__element בגישת BEM), אך ב-CSS Nesting הדבר אינו אפשרי. הסימן & ב-CSS מייצג את סלקטור ההורה המלא ואינו מאפשר שרשור מחרוזות.

כיצד לזהות תמיכת דפדפנים

אם אתם צריכים לתמוך בדפדפנים ישנים שאינם תומכים ב-CSS Nesting, השתמשו ב-@supports כדי להחיל סגנונות מקוננים רק בסביבות נתמכות.

שימוש ב- supports@:

@supports selector(&) {
  .container {
    .child {
      color: red;
    }
  }
} 

@supports not selector(&) {
  .container .child {
    color: red;
  }
}

תמיכת דפדפנים

CSS Nesting נתמך בכל הדפדפנים המודרניים: Chrome 120+, Edge 120+, Firefox 117+ ו-Safari 17.2+. עם תמיכה של מעל 90% מהדפדפנים בעולם, CSS Nesting בטוח לשימוש בפרודקשן עבור רוב הפרויקטים. יש לציין כי דפדפנים ישנים יותר כמו Chrome 112-119 ו-Safari 16.5-17.1 מציעים תמיכה חלקית (ללא התחביר המרוכך). לפרטים נוספים, בקרו ב-Can I Use או תנו מבט בטבלה מטה המתעדכנת אוטומטית בתמיכת הדפדפנים:

שאלות נפוצות

לסיכום

CSS Nesting מאפשר למפתחים לכתוב סגנונות אינטואיטיביים יותר ולשמור על מבנה CSS מקביל למבנה ה- HTML. הבנת הסימנים המרכזיים והימנעות מטעויות נפוצות יאפשרו לכם לנצל את הפוטנציאל המלא של הכלי… עד כאן. מקווה שלמדתם משהו חדש, שאלות והערות יתקבלו בברכה בתגובות הפוסט.