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

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

1. וודאו שאתם מכירים את הבסיס

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

1. display
2. position
3. float
4. box model
5. overflow

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

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

2. וודאו שאתם מעודכנים בחידושים

מאפיינים חדשים של CSS3 הופכים שיטות עבודה מסורבלות למיותרות. אולי הדוגמא הבולטת ביותר היא border-radius, אך היא ממש לא לבד. הנה כמה מאפיינים שחשוב לוודא שאתם מכירים ומבינים:

1. transition
2. transform
3. calc
4. animation
5. columns
6. flexbox

הקישורים ברשימה ישלחו אתכם למאמרים ממוקדים על הנושאים, ועל המאפיינים ללא קישור מומלץ לקרוא מהתיעוד ב MDN.

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

3. וודאו שאתם יודעים להתמודד עם מגוון מכשירים ועם נגישות

ההתמודדות המרכזית ביותר של מעצבי אתרים היום היא ריבוי מכשירים ונגישות. בהיבט של ה CSS עליכם לוודא שאתם מכירים טוב את ה Media Queries ויודעים לכתוב עיצוב שונה לכל מכשיר. הגישה המקובלת היום לפיתוח אתרים מותאמים נקראת Mobile First וכאן יש מאמר המציג אותה בצורה ברורה ועם דוגמאות. 

כלי עבודה שנמצא בשימוש מרכזי בבניית אתרים ריספונסיביים הוא עיצוב רשתי (grid). בחרו אחת מספריות ה CSS המובילות ולמדו כיצד להשתמש בגריד של הספריה כדי לעצב אתר. אני ממליץ על Twitter Bootstrap או Zurb Foundation.

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

בנושא נגישות התקן בארץ קובע שיש לבנות אתרים התואמים לתקן WCAG2. כאן תמצאו Checklist בנושא. וודאו שאתם מבינים ומכירים את הסעיפים ברשימה.

4. וודאו שאתם מבינים את התמונה הגדולה

SMACSS (קיצור של Scalable Maintainable Architecture for CSS) היא טכניקה שכתב ג׳ונתן סנוק שנועדה להתמודד עם קוד CSS רב באמצעות חלוקה לשכבות כך שלכל שכבה תפקיד שונה בעמוד. אם לא קראתם עדיין את הספר שלו מומלץ לקרוא לפחות את הפרקים החינמיים. הספר קצר, קליל ומציע גישה יציבה לניהול קוד ה CSS.

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

5. קחו משהו לאכול

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

מי שירצו ללמוד יותר על התאמת אתרים למגוון מכשירים ופיתוח אתרים ריספונסיביים, מוזמנים לקורס אונליין שפיתחנו בנושא Responsive Web Design כאן באתר ToCode. הקורס בעברית וכולל פרקים לקריאה, קטעי וידאו, דוגמאות ותרגולים בנושאי CSS, שימוש בספריות CSS, כלי עבודה לבדיקת האתר על מובייל ושיפור זמני טעינה. לפרטים נוספים מוזמנים לאתר הקורס בכתובת:
https://tocode.co.il/bundles/responsive-web-design