עבודה עם גיליונות סגנון מדורגים (CSS) יכולה להיות קשה למתחילים. באמצעות CSS, אתה יכול לבנות, לעדכן ולתחזק את המראה של האפליקציה שלך. אבל השפה דורשת מיומנויות לתפעל דפי HTML כדי לקבל את הפריסה הרצויה.
הנה כמה טעויות שכדאי להימנע מהן בעת עבודה עם CSS. הם יחסכו לך זמן ויקלו על תהליך הפיתוח שלך.
1. שימוש ב-px עבור גדלי גופנים
יחידת ה-"px" מייצגת פיקסלים. אתה יכול להשתמש בו כדי לבטא אורכים שונים בדף אינטרנט, החל מהרוחב והגובה של אלמנט ועד לגודל הגופן שלו.
עם זאת, px נועל את העיצוב שלך לגודל קבוע עבור כל המסכים. תמונה ב-px יכולה לתפוס את מלוא הרוחב של מסך אחד, ורק חלק קטן של מסך אחר. אם אתה רוצה אלמנט פרופורציונלי יותר, להשתמש במידות יחסיות כגון rem, או אחוזים (%).
המדידה היחסית הטובה ביותר לשימוש היא rem. יחידה זו מתייחסת לגודל הגופן של רכיב הבסיס שקורא יכול להגדיר לעתים קרובות בהגדרות הדפדפן שלו. אתה יכול לראות את ההשפעה של px ו-rem על אלמנט בדוגמה הבאה:
html>
<HTML>
<רֹאשׁ>רֹאשׁ>
<גוּף>
<h1>זו כותרת 1h1>
<h2>זו כותרת 2h2>
<ע>זו פסקה.ע>
<ע>זו עוד פסקה.ע>
גוּף>
html>אתה יכול לסגנן את גדלי הגופנים במסמך זה באמצעות יחידות px עם ה-CSS הבא:
h1 {
גודל גופן: 50פיקסלים;
}h2 {
גודל גופן: 30פיקסלים;
}
ע {
גודל גופן: 15פיקסלים;
}
הדף המתקבל נראה מקובל כאשר אתה צופה בו על מסך גדול:
אבל זה לא נראה ייצוגי על מסך קטן יותר, כמו בטלפון:
לאחר מכן, החל rem על אותו תוכן. ציין גודל גופן בסיס ברכיב ה-html, וגודל רכיבים אחרים באמצעות rems, כפי שמוצג להלן:
html {
גודל גופן: 16פיקסלים;
}h1 {
גודל גופן: 3rem;
}h2 {
גודל גופן: 2rem;
}
ע {
גודל גופן: 1rem;
}
שימו לב להבדל בין המסכים הגדולים לקטנים. עם rem, התוכן מתרחב טוב יותר ללא קשר לגודל המסך. האלמנטים לעולם לא יעלו על גודל המסך שנקבע. לכן עדיף להשתמש באורכים יחסיים ולא בפיקסלים.
על מסך שולחן העבודה:
במסך קטן, עדיין ניתן לקרוא את הטקסט ביחידות רז:
2. לשים את כל הסגנונות שלך בקובץ אחד
שימוש בקובץ CSS אחד לפרויקט גדול יכול ליצור בלגן. יהיה לך קובץ עם שורות קוד ארוכות שיבלבלו בעת העדכון. נסה להשתמש בקבצים שונים עבור גיליונות סגנונות CSS עבור רכיבים שונים.
לדוגמה, אתה יכול לקבל קבצים שונים עבור ניווט, כותרת עליונה וכותרת תחתונה. ועוד אחד למקטעים בגוף. הפרדת קובצי ה-CSS שלך עוזרת לבנות את האפליקציה שלך ולעודד שימושיות בקוד.
3. שימוש לא הולם ב-CSS מוטבע
ב-vanilla CSS אתה יכול לכתוב סגנונות בדפי HTML בדיוק כמו ב- מסגרות CSS כמו Bootstrap ו- TailwindCSS. CSS מוטבע מאפשר לך להחיל סגנון ייחודי על אלמנט HTML. הוא משתמש בתכונת הסגנון של אלמנט ה-HTML.
הקוד הבא הוא דוגמה ל-CSS מוטבע.
<h2סִגְנוֹן="צבע ירוק;">זו כותרת ירוקהh2>
<עסִגְנוֹן="צבע אדום;">זו פסקה אדומה.ע>
הטקסט יופיע כך:
עם זאת, HTML עם CSS מוטבע בלבד יכול להיות מבולגן. מכיוון שאין מיקום אחר ל-CSS, כל ה-CSS קיים באותו קובץ כמו ה-HTML. זה ייראה צפוף. עריכת קובץ כזה קשה, במיוחד אם זה לא הקוד שלך.
כמו כן, עם CSS מוטבע, אתה צריך לכתוב קוד עבור כל אלמנט. זה מגביר את החזרות ומצמצם את השימוש החוזר בקוד. השתמש תמיד בשילוב של גיליונות סגנונות חיצוניים ו-CSS מוטבע כדי לסגנן את דפי האינטרנט שלך.
4. שימוש יתר !חשוב
ב-CSS, ה !חָשׁוּב כלל מוסיף חשיבות רבה יותר לנכס/ערך. הוא עוקף כללי סגנון אחרים עבור אותו נכס באלמנט זה.
אתה צריך רק כמה !חָשׁוּב כללים בקוד שלך. השתמש בו רק כאשר יש צורך. אין טעם לכתוב קוד ואז לעקוף אותו. הקוד שלך ייראה מבולגן ויגרום לבעיות בעת הפעלה במכשירים מסוימים.
html>
<html>
<רֹאשׁ>רֹאשׁ>
<גוּף>
<ע> אני כתום ע>
<עמעמד="הכיתה שלי"> אני ירוק ע>
<עתְעוּדַת זֶהוּת="התעודת זהות שלי"> אני כחול. ע>
גוּף>
html>CSS:
#התעודת זהות שלי {
צבע רקע: כְּחוֹל;
}.הכיתה שלי {
צבע רקע: ירוק;
}
ע {
צבע רקע: תפוז !חָשׁוּב;
}
התוצאה היא כזו:
5. לא עוקב אחר מוסכמות שמות
ל-CSS יש מוסכמות שמות שמנחות מפתחים כיצד לכתוב קוד סטנדרטי. זה חיוני אם אתה בסופו של דבר איתור באגים בקובץ ה-CSS בתאריך עתידי.
אחד מהסטנדרטים הללו כולל שימוש במקפים להפרדת מילים מקובצות. אחר הוא מתן שם לבורר לפי מה שהוא עושה. אז מי שמסתכל על זה לא יצטרך לנחש. זה גם מקל על קריאה, תחזוקה ושיתוף של קוד. לדוגמה:
במקום זה:
.image1 { שוליים-שמאליים: 3%; }כתוב את זה כך:
.boy-image { שוליים-שמאליים: 3%; }כאשר מסתכלים בגיליון הסגנונות, תדעו בדיוק לאיזו תמונה מיועד הקוד. מדריך סגנון HTML/CSS של גוגל מפרט מוסכמות רבות נוספות שכל מפתח צריך לדעת.
כתיבת הערות היא המיומנות המוערכת ביותר בתכנות. אנשים רבים שוכחים לכתוב הערות כדי להסביר את הקוד שלהם. אבל זה חוסך זמן. הערות חיוניות לקריאה ותחזוקה של קוד.
מכיוון ש-CSS בנוי בצורה רופפת וכל אחד יכול לפתח מוסכמות משלו, הערות הן חיוניות. שימוש בהערות מובנות היטב כדי להסביר את גיליון הסגנונות שלך הוא תרגול טוב. אתה יכול לכתוב הערות המסבירות חלקים בקוד ומה הם עושים.
/* רכיבי וידאו זקוקים למרחב כדי לנשום */
.וִידֵאוֹ {
שוליים למעלה: 2em;
}
/* עיצוב מדור הגיבורים */
.דִברֵי בְּרָכָה {
שוליים למעלה: 1em;
}
7. נכשל בתכנון מראש
אנשים רבים עושים את זה, אבל זו טעות חמורה להתחיל בקידוד ללא תוכנית. CSS קובע איך נראה המבנה של ה-front-end שלך. העיצוב אומר הרבה על כישורי התכנות שלך.
עיצוב לאתר שלך מבהיר את החזון שלך ואת המשאבים הדרושים כדי להביא אותך לשם. יש תמונה מחשבתית של הפרויקט שלך. לאחר מכן עצב אותו על נייר או השתמש ערכת כלים לעיצוב כמו Canva לדמיין את מה שאתה רוצה.
כאשר יש לך תמונה מלאה של הפרויקט, הרכיב את כל המשאבים שלך והתחל בקידוד. זה יחסוך לך זמן ויתירות.
מדוע כדאי לשקול המלצות אלו
אם אתה מפתח אפליקציות באינטרנט, תשתמש ב-CSS. עבודה טובה עם CSS דורשת תרגול וציות למוסכמות הסטנדרטיות. המוסכמות לא רק הופכות את הקוד שלך לקריא אלא גם לתחזוקה.
כתיבת קוד סטנדרטי תחסוך לך זמן ומאמץ. את הזמן שהיית מבלה בעיצוב החזית הקדמית תוכל להשקיע בתכונות מורכבות יותר. זה גם מבטיח שתוכל לעשות שימוש חוזר בקוד ולשתף אותו עם אחרים. כתוב קוד טוב יותר על ידי ביצוע המוסכמות שנקבעו והפוך למפתח טוב יותר.