הסבר על CSS Modules

תמלול ההרצאה: הסבר על CSS Modules

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על CSS Modules» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:27

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

3. 00:41

   שלו. אז הקונספט של CSS Modules בא לפתור את הבעיה הזאת. אז איך אנחנו מיישמים את זה?

4. 00:52

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

5. 01:10

   צירפנו, בואו נלך ל-Hours, ומה שאנחנו רוצים לעשות זה קודם כל בואו נעצב פה איזה משהו, נגדיר שכאן יש לנו Box, כמו תמיד, נגדיר שיש לנו כאן פסקה Opening Hours ונגדיר כאן איזה ואנחנו רוצים שהספן תכיל איזשהו עיצוב עבור השעות עצמם ובואו נניח אנחנו פתוחים מ-7 AM

6. 01:54

   עד 9 PM ובואו נרשום אחרי השעות איזשהו Sunday to Thursday גם ימים ויש לנו כרגע איזשהו קומפוננטה שמציגה לי מתי אנחנו פתוחים בואו נשים את זה בספורט יש לנו כאן את ה-Hours נחזור לפה והנה אנחנו רואים קומפוננטה אין לה שום עיצוב מיוחד כרגע ואנחנו רוצים להגדיר פה מספר עיצובים אנחנו רוצים להגדיר

7. 02:35

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

8. 03:00

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

9. 03:14

   אז הטכניקה של CSS Modules אומרת את הדבר הבא: קובץ של ה-CSS חייב להיות בעל הסיומת נקודה מודול נקודה CSS. לא תם CSS רגיל, הוא חייב להסתיים מודול נקודה CSS. רק ככה React יודעת שהטכניקה הזאת זה CSS מודול ותכף אתם תראו גם מה היא בעצם עושה.

10. 03:48

    הדבר הבא, אנחנו מגדירים קלאסים. אנחנו לא יכולים להגדיר פה אלמנט ניימס, אנחנו מגדירים רק קלאסים. אז הנה יש לנו פה את הקלאס Hours ובואו נניח שב-Hours יש לנו Background אימג' ליניאר גרדיאנט, בואו ניתן לו ממג'נטה לדארק מג'נטה.

11. 04:22

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

12. 04:52

    ויהיה לו Color White ויהיה לו Font Weight Bold. ובואו ניקח עוד אחד ונקרא לו underlined וניתן לו text decoration underlined בצורה כזאת, אורייט?

13. 05:17

    אז מה אנחנו צריכים לעשות? אז כאן אנחנו לא מבצעים את האימפורט בצורה הקלאסית הרגילה וגם כמובן השם של הקובץ הוא כבר שם אחר אז אנחנו מוחקים את זה ואנחנו מייבאים from הקובץ הזה שהיה נקרא hours.module.css, אנחנו מייבאים ממנו Object, זאת אומרת כאן אני כותב איזשהו Object, אני יכול לכתוב סתם איזשהו שם ABC. אני לא אקרא לו ABC,

14. 05:51

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

15. 06:21

    יהיה עוד איזשהו קומפוננט שאפילו מתכנת אחר בנה ויהיה בקומפוננט האחר קלאס underlined או bright או hours לא משנה אותו השמות שלי הם לא יהיו בסופו של דבר בעלות אותו השם עבור הקומפורנט הזה.

16. 06:39

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

17. 06:54

    עכשיו, איך אנחנו משתמשים בזה? אז השיטה הפשוטה, בואו ניקח נניח, יש לנו פה את הפסקה, ואנחנו רוצים לבוא ולתת class name, ובקלאס ניים להגיד שאנחנו רוצים ברייט אז ברייט זה מאפיין שנמצא בתוך css אני רושם css