קינון

הוספת כללי סגנון CSS בתוך כללים אחרים יכולה לעזור לכם לארגן את גיליונות הסגנונות, להקל על הקריאה שלהם ולשפר את יכולת התחזוקה שלהם.

סקירה כללית

אחרי שלמדתם על סלקטורים, אתם בטח רוצים לדעת איך לארגן אותם בצורה טובה יותר בגיליונות הסגנונות. נניח שאתם מחילים סגנונות על פריטים בקטע 'מאפיין' באתר. באמצעות קינון, אפשר לקבץ את הסגנונות האלה בתוך כלל .feature כך:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

התוצאה תהיה זהה לתוצאה של כתיבת כל סגנון בנפרד:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

אפשר להשתמש בקינון בכמה רמות שרוצים.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

קיבוץ ויצירת קשרים

הקינון מאפשר לקבץ בצורה תמציתית יותר כללי סגנון וליצור קשרים ביניהם.

כברירת מחדל, הכלל המקונן יהיה קשור לכלל החיצוני כקומבינטור צאצא. משתמשים בבוררים בכללים המקוננים כדי לשנות את הקשרים.

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

הגדרת קשרים מפורשים באמצעות הבורר &

אפשר גם להשתמש בבורר & כדי להיות יותר מפורשים כשמטמיעים כללי סגנון. אפשר לחשוב על & כסמל שמייצג את בורר ההורה.

.feature {
 & button {
    color: blue;
  }
}

זה יהיה שווה ערך לכתיבת הסגנונות כך:

.feature button {
  color: blue;
}

מתי נדרש הערך &

בלי &, בוררים מוטמעים יהיו בוררים של צאצאים של בורר ההורה. כדי ליצור בוררים מורכבים, & נדרש.

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

אפשר גם לשנות את ההקשר ולמקם את בורר & בסוף בורר הילדים או משני הצדדים שלו.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

בדוגמה האחרונה, אנחנו מוסיפים סגנונות לתמונות בתוך אלמנט עם המחלקה .my-component. האפשרות הזו יכולה להיות שימושית אם אתם עובדים על פרויקט שבו אי אפשר להוסיף class או id לאלמנט.

קינון וספציפיות

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

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

הכלל הראשון מכוון לכל הקישורים בתוך הרכיבים #main-header ו-.intro, ומגדיר את הצבע שלהם לירוק.

הכלל השני מנסה לבטל את ההגדרה הזו כדי שהקישורים בתוך הרכיב .intro יהיו כחולים.

אם נבחן את הספציפיות של כל כלל, נבין למה זה לא עובד.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

מכיוון שהכלל הראשון מכיל id ברשימת הבוררים שלו, וכללים מקוננים מקבלים את הספציפיות של הבורר עם הספציפיות הכי גבוהה, הספציפיות שלו גבוהה יותר מהספציפיות של הכלל השני. הקישורים ירוקים גם ברכיבי a שלא נמצאים בתוך רכיב עם הבורר #main-header.

קינון לא תקין

בדומה ל-:is(), בורר הקינון לא יכול לייצג פסאודו-אלמנטים.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

הייתם מצפים שהאלמנט blockquote ורכיבי ה-pseudo שלו יכללו גם טקסט וגם גבולות בצבע navy, אבל זה לא המצב. מכיוון שהבורר & לא יכול לייצג פסאודו-אלמנטים, סגנונות הגבול המקוננים יחולו רק על הציטוט.

כשיוצרים בוררים מורכבים באמצעות & ובוררי סוג, בורר הסוג חייב להופיע ראשון בלי רווחים לבנים ביניהם.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

הכלל הזה מאפשר להשתמש בקינון CSS לצד כלים לעיבוד מקדים כמו Sass. ב-Sass, אם כותבים &p, הסלקטור של ההורה יצורף לסלקטור של הסוג המקונן, והתוצאה תהיה .featurep.

קינון של כללי at

אפשר גם להשתמש בכללי קבוצה מותנים של CSS כמו @container,‏ @media,‏ @supports ו-@layer.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

בדיקת ההבנה