מתכנתים לא אוהבים לכתוב CSS ויש לזה כל מיני סיבות. אפילו אנשי Front End רבים שפגשתי העדיפו להתמקד בצד הטכני יותר של פיתוח JavaScript או React ולהשאיר את ה CSS למעצבים. במקביל ככל שהעולם של ה CSS התפתח כך זה רק עוד יותר הפחיד רבים מאיתנו: עכשיו ללמוד Flexbox ו grid? ובאיזה דפדפנים כל דבר עובד? וממילא מה שאני לא אעשה זה לא יראה טוב אז בשביל מה להתאמץ.

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

1. חברו עוד מסך

כתיבת CSS היא תהליך ויזואלי זה אומר שאנחנו חייבים לראות את התוצאה בזמן שכותבים את הקוד. אם אתם כל הזמן עוברים בין החלון של ה IDE לחלון של הדפדפן יהיה לכם קשה להתרכז ותתעייפו יותר מהר.

בכתיבת CSS כדאי להשתמש מינימום בשני מסכים (אם יש יותר זה תמיד טוב): אחד לדפדפן והשני ל IDE. אני לא אוהב להשתמש בדפדפן בתור IDE למרות שכלי הפיתוח של דפדפנים היום די טובים, אבל אם אתם כן אוהבים זה בסדר - פשוט הפרידו את כלי הפיתוח לחלון נפרד מהדפדפן ושימו אותם על המסך השני.

טריק נוסף שעוזר לא לעייף את העיניים הוא כפתור Device Mode בכלי הפיתוח: במקום להגדיל ולהקטין את החלון אתם פותחים Device Mode ומגדילים ומקטינים רק את החלק שמראה את האתר. כך גם שאר הטאבים שלכם נשארים בגודל הרגיל וגם אתם רואים תמיד את הגודל האמיתי עליו אתם מפתחים.

2. הפעילו Hot Reloading

בהנחה שאתם משתמשים ב IDE חיצוני הדבר האחרון שאתם רוצים זה ללחוץ F5 אחרי כל שינוי. חברו את החוטים כדי לקבל Hot Reloading כלומר שכל פעם שאתם שומרים בצורה מיידית חלון הדפדפן מתעדכן. היום יש ל Webpack כבר מנגנון שאפילו לא טוען מחדש את העמוד כשה CSS מתעדכן, כך שאתם יכולים לשנות CSS ולראות את ההשפעה מיד בלי לאבד פעולות שעשיתם ב JavaScript או טקסט שהכנסתם בשדות.

3. אל תשתמשו ב Framework

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

סיבה שניה לתסכול היא שיש כל כך הרבה Frameworks כך שכשלא הולך עם אחד אנחנו מתפתים לנסות עוד אחד ועוד אחד וככה במקום לבנות אתר אנחנו רק נתקעים על בחירת פריימוורק.

האמת שעם היכולות של CSS היום צריך מעט מאוד האקים כדי שדברים יעבדו ויראו טוב. אם אתם יודעים להשתמש כמו שצריך ביכולות של CSS יהיה לכם יחסית קל לבנות כל עיצוב שאתם צריכים.

4. לימדו CSS

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

לכל פסיק ב CSS יש משמעות והסבר. ואני יודע ש CSS זה אוקיינוס ויש הרבה יכולות והרבה מאפיינים עם שהמשמעות שלהם לא אינטואיטיבית (היוש z-index); ועדיין העצה לגבי קוד תופסת כאן: מצאתם פוסט או תשובה ב Stack Overflow שמסבירים איך לעשות משהו? עכשיו לכו לקרוא בתיעוד ב MDN מה כל מילה בפיתרון אומרת כדי שתוכלו לכתוב את ה CSS הזה אצלכם וגם להתאים אותו לאתר שלכם.

(מחפשים בסיס טוב ב CSS ואל בטוחים איפה להתחיל? נו יש לנו קורס לזה. הוא נקרא Front End ויש בו פרק די טוב על CSS, כולל היסודות וגם הנושאים החדשים כמו flexbox ו grid).

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