אם יצא לכם לפתח מערכות/ אפליקציות גדולות שכללו המון קבצי CSS אז בטח בזבזתם זמן רב בחשיבה על שמות משתנים ופיתוח/שימוש בשיטות שונות על מנת שלא יהיו קונפליקטים בין קבצים שונים(scss, bem וכו..). ככל שהזמן עבר והפריימוורקים תפסו נתח שוק רב יותר עלה הצורך ב css ״מקומי״ לקומפוננטה ( local scope).
אז כיצד ניתן להפוך קלאסים ואנימציות ב- CSS שיחולו על קומפוננטה ספציפית? בפוסט זה נעסוק באחת מהדרכים המצויינות לעשות זאת הכירו את CSS Modules
החל מ Create React App 2.0 ששוחררה ב1 באוקטובר 2018 ריאקט מגיעה עם תמיכה מובנית עבור CSS Modules. אם יש לכם פרוייקט קיים שעובד עם גרסא ישנה יותר תוכלו לעדכן לגרסא העדכנית ביותר.
איך משתמשים ב CSS modules
תחילה ניצור פרוייקט חדש באמצעות הפקודה create-react-app css-modulesלאחר שסיימנו להתקין את הפרוייקט שלנו אנחנו מוכנים לצאת לדרך.
נפתח קובץ css חדש עם השם של הקומפוננטה שלנו ונוסיף לו קידומת ״module."
לדוגמא: login.module.css ונייבא את הקובץ שלנו לקופמוננטה.
כעת נוכל להתחיל לכתוב את הקלאסים/אנימציות שלנו כמו שהיינו כותבים בקובץ CSS רגיל. קלאס עם יותר ממילה אחת מומלץ לכתוב בשיטת camelCase. הסיבה לכך היא שאחר כך אנחנו ניגשים לקלאסים האלה כפרופרטיס של אובייקט ג׳אווהסקריפט.(styles.className) אם נרצה לתת שמות עם ״-״ נקרא לקלאס בצורה הזאת [׳styles['class-name
כאשר נריץ את האפליקציה שלנו שמות הקלאסים ב DOM יתערבבו אוטומטית כדי למנוע התנגשויות.
אם נסתכל ב devtools נוכל לראות שבמקום title יהיה רשום לנו משהו כמו
login_title__3ENyy. ופה מגיע החלק היפה והמעניין גם אם נרשום בקובץ css אחר קלאס בשם title לא תהיה התנגשות בין הקלאסים מכיוון שהם ירונדרו אחרת ב DOM. רגע.. בתור מפתחים אנחנו רוצים גם את היכולת לשתף קלאסים ומשתנים גם בין קומפוננטות שונות. גם את היכולת הזאת יש לנו ונדבר עליה מיד.
תהיו הראשונים לדעת!
הרשמו לניוזלטר שלנו וקבלו התראות על מאמרים חדשים ישירות למייל
Composition
פיצ׳ר מעולה שמגיע עם css modules הוא ״class composition״. יכולת זו מאפשרת לנו ״לחבר״ (to compose) קלאסים עי ירושה של סטייל מקלאס אחר. בדוגמא הבאה נראה ירושה מתוך אותו קובץ.
כמובן שאפשר לרשת קלאסים גם מקובץ אחר, כל מה שנצטרך לציין בתוך ה-״composes״ הוא את שם הקלאס ואת מיקום הקובץ ממנו אנחנו יורשים. בואו נראה דוגמא:
קלאסים גלובליים
יש לנו את היכולת גם להגדיר קלאס שהוא גלובלאלי בתוך קובץ של CSS module
כל מה שנצטרך להוסיף הוא global: לפני שם הקלאס. בואו נראה דוגמא
כעת למרות ש title הוגדר בתוך קובץ שהוא module נוכל לקרוא לקלאס הזה בכל קובץ באפליקציה ונקבל את הסטייל שלו. כדי לקבל את הסטייל נכתוב:
סיכום
- החל מגרסא 2 של CRA אנו מקבלים את CSS modules כפיצ׳ר מובנה.
- ב- CSS modules כל קלאס ואנימציה נמצאים באופן מקומי ( local scope)על הקומפוננטה שאותה הגדרנו. בדרך זו אנו יכולים לתת איזה שמות שנרצה לקלאסים מבלי לדאוג לגבי קונפליקטים גלובליים.
- יש לנו את היכולת לרשת קלאסים בתוך אותו קובץ או מקובץ אחר על ידי compose
- נוכל להגדיר קלאסים גלבאליים גם בתוך קובץ מסוג module
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
3 Responses
הסבר מעולה ! ופשוט להבנה
תודה רבה 🙂
אחלה פוסט, תודה רבה רועי!
אני בדיוק מתלבט אם להכניס css modules לפרויקט קיים, ונרתע מזה בגלל שצריך לחזור לcss ולנטוש את scss