איך לומדים CSS?

דרישות מקדימות:

נתחיל בקביעת עובדות בשטח. ישנם דברים שלדעתי המקצועית נדרש לדעת לפני שניגשים ללמוד CSS.
הדברים הללו הם:
1. HTML
2. סטנדרטים באינטרנט
3. XHTML
4. לוגיקה של מבנה אתר

למה?
נעבור אחד אחד ונסביר:

HTML

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

סטנדרטים באינטרנט

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

XHTML

לא במקרה יצרתי הפרדה בין HTML לבין XHTML.
XHTML היא השפה המועדפת לבניית אתרים באמצעות סטנדרטים באינטרנט ו-CSS, והיא בעצם HTML משולב בסטנדרטים.

לוגיקה של מבנה האתר

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

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

 

דרך החשיבה שלי מכתיבה כי בכדי ללמוד ולהבין CSS צריך בראש ובראשונה להבין ש-CSS היא לא טכנולוגיה אלא שפה (בכדי להבין קצת יותר בנוגע לקביעה אני ממליץ על המאמר "CSS - טכנולוגיה או שפה?").

מצויידים בהבנה הזו נוכל להמשיך אל עבר היעד המרכזי שלנו - לימוד CSS.

אז היכן מתחילים?

כמו כל שפה שמתחילים ללמוד, יש להתחיל מהבסיס - משמע - המילים.

המילים:

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

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

המשפטים:

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

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

המודלים:

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

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

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

רשימת המודלים המרכזיים וסדר הלימוד המומלץ:

1. מודל הזרימה (flow model)
2. מודל הקופסה (box model)
3. מודל ההצפה (float model)

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

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

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

כתיבת CSS:

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

השלב ההגיוני והמובן מאליו לאחר לימוד הקריאה והכתיבה הוא למעשה - הדיבור.

(גירסה נוכחית למאמר - 18.08.06)