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

1. איך זה עובד

ריאקט מאפשר לנו לכתוב תגית style בתוך JSX של קומפוננטה כדי לשתול קוד CSS בתור Inline Style במסמך. נזכור שאם בתוך HTML אנחנו כותבים תגית style, אפילו מחוץ ל head, אז הדפדפן עדיין מתיחס לכללי ה CSS שמוגדרים שם. הקוד הבא בתוך קומפוננטה מוסיף תגית style כזו:

export default function Main() {
  return (
    <>
      <style>
        {`
          h1 { color: red }
          body { background: yellow; }
          a { color: blue }
          `}
      </style>
      <h1>Hello World</h1>
    </>
  )
}

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

הבעיה עם הדבר הזה היא שאם תגית style כתובה בתוך קומפוננטה אז היא תופיע מספר פעמים בעמוד (לפי מספר הפעמים שהקומפוננטה מודבקת לעמוד).

לכן ריאקט מאפשר לנו להגדיר מזהה לכל תגית style ואם אנחנו מגדירים מזהה וקדימות לתגית style אז ריאקט יעביר את התגית ל head של המסמך. אם לשתי תגיות style איפשהו בעמוד יש את אותו מזהה אז רק אחת מהן תופיע בראש העמוד. אנחנו מגדירים מזהה עם מאפיין href וסדר קדימויות עם מאפיין precedence:

export default function Main() {
  return (
    <>
      <style href="main" precedence="medium">
        {`
          h1 { color: red }
          body { background: yellow; }
          a { color: blue }
          `}
      </style>
      <h1>Hello World</h1>
    </>
  )
}

2. מה אפשר לבנות עם זה

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

1. כתבו קומפוננטות בסיסיות לדוגמה כפתור, ובהן הגדירו את ה CSS שהן צריכות בתור תגית style עם href וסדר קדימות.

2. בקומפוננטות הגדולות יותר שלכם השתמשו בקומפוננטות הבסיסיות ככל שתרצו.

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

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