טעויות CSS נפוצות של מתחילים ואיך נמנעים מהן¶
שפת ה-CSS נראית בהתחלה כמו השפה הכי פשוטה שיש - כותבים כמה שורות, רואים תוצאה, נראה שהכל עובד. הבעיה מתחילה כשהעמוד גדל, יש יותר קומפוננטות, ופתאום כלל שעבד אתמול "נשבר" מסיבה לא ברורה. רוב הטעויות האלה חוזרות על עצמן אצל כמעט כל מי שמתחיל, והן נובעות מכמה הרגלים ספציפיים שקל לתקן ברגע שמזהים אותם.
הרגל של !important - פותר תסמין, לא סיבה¶
כשכלל CSS "לא תופס", הפתרון המהיר והמפתה הוא להוסיף !important ולעבור הלאה. זה עובד, אבל זה כמו לשים פלסטר על אזעקת אש. !important לא פותר את הבעיה האמיתית - שהיא כמעט תמיד אי-הבנה של specificity, כלומר הכללים שקובעים איזה סלקטור "מנצח" כשכמה כללים מתנגשים על אותו אלמנט.
ברגע שמתחילים להשתמש ב-!important, נוצר אפקט דומינו - כלל אחר שצריך "לנצח" אותו יצטרך גם הוא !important, וכך זה מסלים עד שכל הקובץ מלא בהצהרות שדורסות אחת את השנייה בלי סדר הגיוני. הפתרון האמיתי הוא להבין למה הכלל שלכם לא ניצח מלכתחילה - האם סלקטור אחר יותר ספציפי, האם יש כלל שמוגדר מאוחר יותר בקובץ, או האם יש בעיה במבנה עצמו - ולתקן שם, לא לכפות ניצחון עם דגל חירום.
למה הרוחב שלכם "לא נכון" - box-sizing¶
אחת התסכולים הכי נפוצים אצל מתחילים היא לקבוע לאלמנט width: 300px, להוסיף לו padding ו-border, ולגלות שהוא בפועל רחב יותר מ-300 פיקסלים. הסיבה היא ברירת המחדל של הדפדפן - box-sizing: content-box - שבה ה-width שאתם קובעים מתייחס רק לתוכן, ו-padding ו-border נוספים מעליו.
הפתרון הפשוט ביותר הוא לעבור ל-box-sizing: border-box, שבו ה-width שאתם קובעים כולל את ה-padding וה-border בתוכו, כך שהאלמנט נשאר בדיוק ברוחב שביקשתם. הרבה מפתחים מוסיפים כלל גלובלי שמחיל את זה על כל האלמנטים בעמוד כבר בהתחלה, כדי לא להתמודד עם ההפתעה הזאת שוב ושוב בכל קומפוננטה חדשה.
פיקסלים קבועים בכל מקום במקום יחידות יחסיות¶
כתיבת font-size: 16px בכל מקום, ו-margin: 24px בכל מקום, נראית פשוטה ומדויקת. הבעיה מתגלה כשמישהו משנה את גודל הפונט הבסיסי של הדפדפן - למשל מטעמי נגישות - וכל העיצוב שלכם נשאר קבוע וקשיח, בלי להגיב לזה בכלל.
יחידות יחסיות כמו rem (יחסי לגודל הפונט הבסיסי של הדף) ו-em (יחסי לגודל הפונט של האלמנט עצמו) מאפשרות לעיצוב להגיב באופן טבעי לשינויים כאלה. זה לא אומר שפיקסלים תמיד אסורים - לפעמים יש היגיון בגודל קבוע לחלוטין, למשל לגבול דק של פיקסל אחד. אבל ככלל אצבע, לגדלי טקסט, ריווחים, ורוחבים של אזורי תוכן, כדאי להתרגל לחשוב ביחידות יחסיות כברירת מחדל, לא כחריג.
נלחמים במודל הקופסה עם מיקום מוחלט¶
מתחילים רבים, כשהם לא מצליחים לסדר שני אלמנטים זה לצד זה בדיוק כמו שרצו, פונים ל-position: absolute כדי "לכפות" את המיקום המדויק שהם רוצים. זה עובד לרגע, אבל זה מוציא את האלמנט לגמרי מהזרימה הרגילה של הדף - מה שאומר שאם תוכן אחר משתנה בגודל, או שהעמוד נצפה במסך אחר, האלמנט הממוקם ידרוס תוכן אחר או ייראה שבור לגמרי.
הכלים המודרניים לפריסה נועדו בדיוק בשביל זה, וכבר יש כאן באתר הסבר מפורט על ההבדלים ביניהם - הנקודה החשובה כאן היא רק לזכור שהם קיימים בתור הכלי הנכון למשימה. במקום להיאבק במודל הקופסה עם מיקום מוחלט, שווה לעצור רגע ולשאול אם המקרה שלכם הוא בעצם בעיה של פריסה, שיש לה כלים ייעודיים שנבנו בדיוק בשבילה.
שוכחים לתכנן מובייל תחילה¶
טעות אחרונה ונפוצה מאוד היא לבנות עיצוב שלם על מסך רחב, ורק בסוף "לדחוס" אותו למסך טלפון עם כמה כללי media query שנוספים בדיעבד. התוצאה כמעט תמיד מרגישה כמו טלאי - אלמנטים שנדחסים בצורה מוזרה, טקסט שקטן מדי לקריאה, כפתורים שקשה ללחוץ עליהם עם אצבע.
הגישה ההפוכה - לתכנן קודם למסך הכי צר, ורק אחר כך להוסיף כללים שמרחיבים ומעשירים את הפריסה ככל שהמסך גדל - כמעט תמיד נותנת תוצאה נקייה יותר, כי היא מכריחה אתכם לחשוב מההתחלה על מה באמת חיוני בתוכן. זה עיקרון שחוזר שוב ושוב בקורס צד לקוח - כמעט תמיד קל יותר להוסיף מורכבות למסך רחב מאשר לצמצם מורכבות שכבר נבנתה למסך צר.
לסיכום¶
רוב הטעויות האלה לא נובעות מחוסר כישרון, אלא מהרגלים שנוצרים כשלומדים CSS בלי להבין את המנגנון שמאחורי הכללים. ברגע שמבינים למה !important הוא סימפטום, למה box-sizing משנה הכל, ולמה יחידות יחסיות ומובייל-תחילה חוסכים כאבי ראש, ה-CSS מפסיק להרגיש כמו קסם שחור.
נתקלתם בטעות CSS שגרמה לכם לתקוע הרבה זמן? שתפו אותנו בדיסקורד.