איך CSS Container Style Queries חוסכים מאות שורות JavaScript בדיזיין סיסטם

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

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

הבעיה: שרשור Props בלתי נגמר

בדרך הקלאסית, דן מצא את עצמו כותב קוד React מלא בסרבול תחזוקתי.

כדי שהרכיב ידע איך להתלבש, דן נאלץ להעביר Props במעלה העץ: parentTheme, isSidebar, isPromo. הרכיב הקטן בודק תנאים מורכבים ב-JavaScript רק כדי להחליט אם הרקע יהיה אפור או לבן.

הגדרה · Container Style Queries

תכונת CSS המאפשרת להחיל סגנונות על רכיב בן לפי הערך של משתנה CSS המוגדר ברכיב האב, ללא תלות במבנה ה-DOM המדויק.

הקוד הפך לכבד. כל שינוי קטן בעיצוב של אזור אב דרש עדכון של רכיבי הבן ב-JavaScript.

הניסיון הראשון: קלאסים כפולים וערבוב אחריות

דן ניסה לפתור את זה בדרך ה-CSS הישנה: שרשור מחלקות. הוא הגדיר קלאסים מורכבים כמו .sidebar .card או .dark-theme .card.

זה עבד בהתחלה. אבל אז הדיזיין סיסטם גדל.

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

הפתרון: Style Queries המבוססים על CSS Variables

בשנת 2026, Container Style Queries מציעים דרך נקייה בהרבה. דן הגדיר שרכיב האב קובע ערך של משתנה CSS בלבד, והרכיב המוכל מגיב לערך הזה באופן עצאי.

הנה הדוגמה המעשית:

/* רכיב האב קובע את המשתנה */
.promo-section {
  --section-variant: promo;
}

/* רכיב הבן מגיב לערך המשתנה של האב */
@container style(--section-variant: promo) {
  .card {
    background-color: #ffeb3b;
    border-color: #f57f17;
    color: #212121;
  }
}

קוד נקי. אפס JavaScript.

הרכיב לא צריך לדעת איפה הוא ממוקם ב-DOM. הוא רק שואל את הקונטיינר הקרוב ביותר מה המצב שלו.

התוצאה: דיזיין סיסטם מודולרי באמת

התוצאה בצוות של דן הייתה מיידית.

כמות ה-Props ברכיבי ה-UI ירדה ב-40%. מפתחים חדשים שהצטרפו לצוות יכלו להשתמש בכרטיסיות בכל מקום באפליקציה בלי לקרוא תיעוד עבה על Props מיוחדים.

• רכיבי UI הפכו לאוטונומיים לחלוטין.
• ביצועי הרנדור של האפליקציה השתפרו.
• השינויים הציוריים נשארו בשכבת ה-CSS בלבד.

💡

כשאנחנו מעבירים את לוגיקת העיצוב מ-JavaScript בחזרה ל-CSS, אנחנו מקבלים קוד מהיר יותר, נקי יותר וקל להרחבה.

הלקח ברור: JavaScript מיועד להתנהגות ונתונים. CSS מיועד לעיצוב ומצבים ויזואליים. Style Queries החזירו את גבולות הגזרה למקומם.