ספריות CSS-in-JS, כמו רכיבים מעוצבים, הפכו פופולריות יותר בשנים האחרונות. הם עוטפים CSS עד לרמת הרכיב ומאפשרים לך להשתמש ב-JavaScript כדי להגדיר סגנונות לשימוש חוזר.
באמצעות רכיבים מעוצבים, אתה יכול לשמור על הארכיטקטורה מונעת הרכיבים ש-React כבר מחזקת. אבל לספרייה יש גם כמה חסרונות.
כיצד פועלים רכיבים מעוצבים
ה רכיבים מעוצבים ספריית CSS-in-JS מאפשרת לך לכתוב CSS בתוך קבצי הרכיבים שלך. התחביר שלו זהה ל-CSS, אז די קל לקלוט אותו. זהו נקודת ביניים מושלמת למפתחי JavaScript שנוטים להתרחק מ-CSS טהור.
כדי לראות איך זה עובד, שקול את רכיב הכותרת הבא שמציג אלמנט h1.
const כותרת = styled.h1`
גודל גופן: 1.5em;
יישור טקסט: מרכז;
צבע אדום;
`;
אתה יכול להשתמש ברכיב זה כמו כל רכיב אחר של React.
const בית = () => {
לַחֲזוֹר (
<כותרת>כותרת רכיב בסגנון</Title>
)
}
זה גם מאוד חזק כי זה מקל על העבודה עם אביזרים ומדינה.
לדוגמה, הצבע והרקע של רכיב זה תלויים באביזרים.
יְבוּא מְנוּסָח מ "רכיבים מעוצבים";const כפתור = styled.button`
ריפוד: 0.8 רמ 1.6 רמ;
צבע רקע: ${(props) => (props.primary? "סָגוֹל": "לבן")};
גבול: 1פיקסלים מוצקים #00000;
צבע: ${(props) => (props.primary? "לבן": "סָגוֹל")};
`;
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
לַחֲזוֹר <כפתור ראשוני>יְסוֹדִי</Button>
}
עם רכיבים מעוצבים, אינך צריך להעביר ידנית את האביזרים ל-CSS. הוא זמין באופן אוטומטי, ומפשט סגנונות כתיבה התלויים בנתונים מהרכיב.
יתרונות השימוש ברכיבים מעוצבים
הנה כמה יתרונות של שימוש בספריית הרכיבים המעוצבים.
זה פותר בעיות ספציפיות של CSS
רכיבים מעוצבים מבטלים בעיות ספציפיות מכיוון שהם מקפלים CSS בתוך רכיב. זה אומר שאתה לא צריך לדאוג ששמות מחלקות יתנגשו או שממשק המשתמש שלך יהפוך לבלאגן בגלל התנגשויות שמות מחלקות.
מאפשר לך לכתוב CSS בתוך רכיבים
כפי שניתן לראות מדוגמה של רכיב הכפתור, styled-components מאפשר לך לשלב CSS ו-JS באותו קובץ. לכן, אינך צריך ליצור קובץ CSS נפרד או להמשיך לעבור מקובץ לקובץ.
זהו יתרון עצום בעת יצירת ערכות ממשק משתמש מכיוון שאתה מאחסן את כל הפונקציונליות של הרכיבים בקובץ אחד.
חוץ מזה, כתיבת CSS בתוך רכיבים. זה מקל על שיתוף אביזרים ומצבים עם סגנונות.
מאפשר בדיקת סוגים
עם רכיבים מעוצבים, אתה יכול לבדוק את האביזרים והערכים המשמשים בסגנונות שלך. לדוגמה, אתה יכול לשכתב את רכיב הכפתור שלמעלה באמצעות TypeScript.
מִמְשָׁקאביזרים{
יְסוֹדִי: בוליאני
}
const Button = styled.button<אביזרים>`
ריפוד: 0.8 רמ 1.6 רמ;
צבע רקע: ${(props) => (props.primary? "סָגוֹל": "לבן")};
גבול: 1פיקסלים מוצקים #00000;
צבע: ${(props) => (props.primary? "לבן": "סָגוֹל")};
`;
שימוש ב-TypeScript ברכיב פירושו בדיקת שגיאות סוג תוך כדי קוד והפחתת זמן איתור באגים.
תומך בנושאים מחוץ לקופסה
הוספת ערכת נושא כהה או כל נושא אחר ליישום שלך יכול להיות קשה ודורש זמן. עם זאת, רכיבים מעוצבים מפשטים את התהליך. אתה יכול להוסיף ערכות נושא לאפליקציה שלך על ידי ייצוא א
const כפתור = styled.main`
צבע רקע: ${props => props.theme.light.background};
צבע: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<לַחְצָן>
כפתור אור
</Button>
</ThemeProvider>
רכיב ThemeProvider מעביר את ערכות הנושא לכל הרכיבים המעוצבים שהוא עוטף. לאחר מכן רכיבים אלה יכולים להשתמש בערכי הנושא בסגנונות שלהם. בדוגמה זו, הכפתור משתמש בערכי ערכת הנושא עבור צבעי הרקע והגופן.
חסרונות של שימוש ברכיבים מעוצבים
בעוד שלשימוש בספריית הרכיבים המעוצבים יש יתרונות רבים, יש לו גם חסרונות.
זה לא Independent Framework
כתיבת CSS ב-JS פירושה להפריד בין השניים בעתיד יהיה קשה, וזה נורא לתחזוקה. לדוגמה, אם אי פעם תחליט להחליף את שלך מסגרת JavaScript, תצטרך לשכתב את רוב בסיס הקוד שלך.
זה לוקח זמן ויקר. באמצעות מודולי CSS או ספרייה עצמאית של מסגרת כמו רגש היא חסינה יותר לעתיד.
זה יכול להיות קשה לקרוא
ההבחנה בין רכיבים מעוצבים ל-React יכולה להיות קשה, במיוחד מחוץ למערכת עיצוב אטומית. שקול את הדוגמה הזו:
<רָאשִׁי>
<Nav>
<פריט רשימה>
<LinkText>אמצו חיית מחמד</LinkText>
</ListItem>
<פריט רשימה>
<LinkText>לִתְרוֹם</LinkText>
</ListItem>
</Nav>
<כּוֹתֶרֶת>אמץ, דון'לא חנות!</Header>
<SecondaryBtn btnText="לִתְרוֹם" />
</Main>
הדרך היחידה לדעת איזה רכיב מכיל לוגיקה עסקית היא על ידי בדיקה אם יש לו אביזרים. יתר על כן, למרות ששמות הרכיבים בדוגמה זו הם תיאוריים, עדיין קשה לדמיין אותם.
לדוגמה, רכיב ה-Header עשוי להיות כותרת, אבל אם לא תבדוק את הסגנונות, ייתכן שלעולם לא תדע אם זה h1, h2 או h3.
חלק מהמפתחים פותרים בעיה זו רק על ידי שימוש ברכיב המעוצב כעטיפה ושימוש בתגיות HTML סמנטיות עבור האלמנטים שבתוכו.
בדוגמה זו, רכיב הכותרת יכול להשתמש בתג h1.
<h1>אמץ, דון'לא חנות!</h1>
אתה יכול לקחת את זה הלאה על ידי הגדרת הרכיבים המעוצבים בקובץ אחר (למשל styled.js), שאותו תוכל לייבא מאוחר יותר לרכיב React.
יְבוּא * כפי ש מְנוּסָח מ './מְנוּסָח'
// השתמש ב-styled.components
<מְנוּסָח. רָאשִׁי>
// קוד
</styled.Main>
פעולה זו נותנת לך תצוגה ברורה של אילו רכיבים מעוצבים ואילו רכיבי React.
רכיבים מעוצבים נערכים בזמן ריצה
עבור יישומים המשתמשים ברכיבים מעוצבים, הדפדפן מוריד את ה-CSS ומנתח אותו באמצעות JavaScript לפני הזרקתם לדף. זה גורם לבעיות ביצועים מכיוון שהמשתמש חייב להוריד הרבה JavaScript בטעינה הראשונית.
CSS סטטי הוא הרבה יותר מהיר. אין צורך לעבד אותו לפני שהדפדפן ישתמש בו כדי לסגנן דפים. עם זאת, ספריית הרכיבים המעוצבים משתפרת עם כל מהדורה. אם אתה יכול להרשות לעצמך ביצועים מופחתים, קדימה להשתמש בו.
מתי להשתמש ברכיבים מעוצבים
חלק מהמפתחים נהנים לכתוב CSS בקובצי JS, בעוד שאחרים מעדיפים לקבל קבצי CSS נפרדים. האופן שבו תבחר לכתוב CSS צריך להיות תלוי בסופו של דבר בפרויקט עצמו ובמה שאתה או הצוות שלך אוהבים. רכיבים מעוצבים הם בחירה טובה לבניית ספריית ממשק משתמש מכיוון שהכל יכול להיות בקובץ אחד ובקלות לייצא ולעשות שימוש חוזר.
אם אתה מעדיף לכתוב CSS טהור, השתמש במודולי CSS. אתה יכול לקבל קבצי CSS נפרדים, והוא מבחין באופן מקומי סגנונות כברירת מחדל. לא משנה באיזו בחירה תבחר, ידע מוצק ב-CSS חיוני.
