הפרדה מודולרית בין קוד לעיצוב
כללי ה-CSS קובעים את אופן עיצוב האלמנטים שהוגדרו ב-HTML. כפי שציינו בפרק הקודם, את ה-CSS מפרידים מה-HTML, במטרה ליצור תחזוקה טובה יותר של ה-HTML ושל ה-CSS ובמטרה לאפשר אופטימיזציה למהירות טעינת דפי האינטרנט.
את כללי ה-CSS אפשר לקבוע בכמה אופנים:
- שימוש בכללי עיצוב inline - בשיטה זו, מטמיעים את כללי העיצוב בתוך התגיות השונות ב-HTML ולמעשה מערבבים בין ה-HTML ל-CSS.
- קביעת כללי ה-CSS בחלק ה-head - בשיטה זו, מאגדים את כל כללי ה-CSS לבלוק אחד של כללים, אשר נכלל בחלק ה-head של ה-HTML.
- טעינת קובץ CSS נפרד - בשיטה זו, כל כללי ה-CSS נמצאים בקובץ מרוכז אחד. את הקובץ הזה מקשרים לקובץ ה-HTML הראשי.
נבחן כל אחת מהשיטות הללו להלן.
שימוש בכללי עיצוב inline
נניח שכתבנו את קטע ה-HTML הבא:
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of embedded CSS in HTML.</p>
<p>In this example you will learn the way to use CSS.</p>
</body>
</html>נוכל להוסיף כללי CSS באמצעות המאפיין style לתגיות ה-HTML השונות.
לדוגמה:
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f0f0f0;">
<h1 style="color: blue;">Hello, World!</h1>
<p style="color: black; font-size: 18px;">This is an example of embedded CSS in HTML.</p>
<p style="color: black; font-size: 18px;">In this example you will learn the way to use CSS.</p>
</body>
</html>בדוגמה זו, הוספנו לקטע ה-HTML שלנו מאפייני style שמכילים הגדרות עיצוביות לאלמנטים השונים. לתגית ה-body קבענו את סוג הגופן הכללי שבשימוש ואת צבע הרקע, לתגית הכותרת h1 קבענו את צבע הכתב ולתגית הפסקה p קבענו את צבע הכתב ואת גודל הגופן.
נשים לב שכיוון שיש לנו 2 פסקאות (2 תגיות p נפרדות), קבענו את הגדרות הפסקה (צבע הכתב וגודל הגופן) פעמיים, פעם אחת לכל פסקה.
אם היה לנו עמוד HTML שמציג מאמר בן 5 פרקים, כאשר כל פרק מתחיל בכותרת h2 (סה"כ 5 כותרות h2 לאורך המאמר) וממשיך ב-4 פסקאות (סה"כ 20 פסקאות לאורך המאמר) היינו נאלצים לשכפל את הגדרות הכותרת 5 פעמים (פעם אחת לכל כותרת במאמר) ואת הגדרות הפסקה 20 פעמים (פעם אחת לכל פסקה). ניתן להבין שהדבר יוצר לנו קוד HTML מנופח, עם הרבה מאוד שכפולים של הגדרות שחוזרות על עצמן. ניפוח קוד ה-HTML מזיק לנו בכמה אופנים:
- קושי בקריאות ה-HTML - כיוון שה-HTML מערבב בין הגדרות מבנה ואלמנטים שונים יחד עם הגדרות עיצוביות, הקוד אינו נוח לקריאה.
- קושי בתחזוקה השוטפת - נניח והיינו רוצים להגדיל את גודל הגופן של הפסקאות, היינו צריכים לשנות זאת ב-20 מקומות שונים. זוהי עבודה חזרתית ומיותרת שהיא מקור גדול לטעויות (נוכל בטעות לשכוח לשנות את הגדרות העיצוב של חלק מהפסקאות).
- טעינה איטית של ה-HTML - קובץ ה-HTML מנופח מאוד ולכן זמן הטעינה שלו ארוך מאוד.
קביעת כללי ה-CSS בחלק ה-head
נשתמש באותו קוד HTML מהדוגמה הקודמת. הפעם, נאגד את הגדרות ה-CSS יחד, ונמקם אותן בחלק ה-head של ה-HTML, שהוא החלק המשמש להגדרות השונות של ה-HTML.
הקוד שלנו יראה כך:
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of embedded CSS in HTML.</p>
<p>In this example you will learn the way to use CSS.</p>
</body>
</html>בדוגמה זו, כל כללי ה-CSS מאוגדים יחד וללא חזרתיות מיותרת. למרות שיש בדוגמה 2 פסקאות, הכללים לעיצוב פסקה נרשמים פעם אחת בצורה גורפת לכל הפסקאות בקוד, ולא פעם אחת לכל פסקה.
ניתן לראות שבשיטה זו פתרנו חלק מהבעיות שהיו בשיטה הקודמת, של הטמעת כללי ה-CSS ישירות בקוד ה-HTML:
- קריאות ה-HTML טובה יותר - הקריאות השתפרה מכיוון שכללי ה-CSS מאוגדים יחד ונמצאים באזור נפרד ולא בין תגיות ה-HTML.
- שיפור בתחזוקה השוטפת - התחזוקה השוטפת נוחה יותר, מכיוון שאין חזרתיות מיותרת של כללים. אם נרצה לשנות גודל גופן לפסקאות (ולא משנה כמה פסקאות יש בעמוד ה-HTML) נעשה זאת באמצעות שינוי בכלל יחיד.
- טעינה מהירה יותר של ה-HTML - כיוון שיש פחות חזרה על כללי עיצוב, קובץ ה-HTML הסופי מעט מצומצם יותר ולכן נטען מהר יותר בדפדפן.
טעינת קובץ CSS נפרד
בשיטה זו, אנו מייצרים קובץ CSS חיצוני ובו רשומים כל כללי ה-CSS. את הקובץ טוענים באמצעות הגדרה אחת בחלק ה-head ב-HTML.
נתבסס על הדוגמה הקודמת שבה איגדנו את כל כללי ה-CSS בחלק ה-head של ה-HTML ונראה איך משפרים אותה.
בשלב הראשון, ניצור קובץ CSS חיצוני. זהו קובץ טקסט פשוט עם סיומת css, למשל קובץ בשם style.css. הקובץ יכלול את כל כללי ה-CSS ויראה כך:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
color: black;
font-size: 18px;
}נוכל לשפר את קובץ ה-CSS על ידי דחיסה שלו: נרשום כל כלל CSS בשורה אחת ונסיר את כל הרווחים המיותרים בכל שורה. לאחר הדחיסה, קובץ ה-CSS יראה כך:
body{font-family:Arial,sans-serif;background-color:#f0f0f0;}
h1{color:blue;}
p{color:black;font-size:18px;}דחיסת ה-CSS מביאה לשיפור בתחזוקת קובץ ה-CSS במקרים שהקובץ כולל מאות ואלפי כללים. כמו כן, קובץ דחוס יטען מהר יותר בדפדפן וישפר את מהירות עמוד האינטרנט שאנו בונים.
בשלב השני, נסיר את כללי ה-CSS מקובץ ה-HTML ובמקומם נכניס שורה אחת שמבצעת טעינה של הקובץ החיצוני. קובץ ה-HTML שלנו יראה מעתה כך:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of using an external CSS file.</p>
<p>In this example you will learn the way to use CSS.</p>
</body>
</html>נשים לב לשורה עם התגית link. כאשר הדפדפן קורא את ה-HTML ונתקל בשורת ה-link, הוא טוען את קובץ ה-CSS.
טעינת ה-CSS נעשית בצורה אסינכרונית, כלומר, הדפדפן מבצע את הליך טעינת קובץ ה-CSS במקביל להמשך פענוח ה-HTML. במילים אחרות, טעינת קובץ ה-CSS היא תהליך non-blocking, כלומר, אינה חוסמת את המשך פענוח ה-HTML שנעשה במקביל.
נשים לב: כאשר בונים אתר אינטרנט הכולל הרבה עמודי אינטרנט שונים, ברוב המקרים נשתמש בקובץ CSS יחיד המשותף לכל דפי ה-HTML השונים. זאת מכיוון שהגדרות העיצוב לדפי האינטרנט השונים היא זהה (צבע הכותרת יהיה זהה בכל דפי האינטרנט באתר, גודל הגופן יהיה זהה בכל הפסקאות באתר וכן הלאה).
בשיטה זו, הצלחנו להתייעל עוד יותר:
- קריאות ה-HTML טובה יותר - קיימת הפרדה מלאה בין הגדרות ה-CSS ותגיות ה-HTML ולכן קריאות קוד ה-HTML טובה יותר.
- שיפור בתחזוקה השוטפת - ההפרדה בין ה-HTML ל-CSS היא בגדר "הפרד ומשול". אם נרצה להתמקד בשיפורים במבנה, נשנה את קובץ ה-HTML ואם נרצה להתמקד בשינויים עיצוביים, נשנה את קובץ ה-CSS.
- טעינה מהירה יותר של ה-HTML - כאן יש לנו רווח כפול ומשמעותי. ראשית, טעינת ה-CSS נעשית במקביל לטעינת ה-HTML (כי טעינת ה-CSS היא אסינכרונית) וזה מביא לחסכון בזמן טעינת עמוד האינטרנט שלנו. שנית, קבצי CSS נהנים מזכרון מטמון של הדפדפן. כלומר, הדפדפן טוען אותם פעם אחת בלבד ושומר את ההגדרות האלו בזכרון לוקאלי על המחשב של הגולש. בפעם הבאה שתבוצע טעינה של קובץ ה-CSS החיצוני (כאשר מדפדפים באתר האינטרנט לעמוד אינטרנט אחר), טעינת קובץ ה-CSS תבוצע מתוך הזכרון הלוקאלי של הדפדפן ולא משרת האחסון ולכן מהירות הטעינה תהיה גבוהה יותר בצורה דרמטית.
מתי נשתמש בכל אחת מהשיטות לטעינת ה-CSS
ראינו 3 שיטות לשלב הגדרות CSS ב-HTML. השיטה הטובה ביותר היא הפרדה מלאה בין ה-CSS ל-HTML, באמצעות שימוש בקובץ CSS חיצוני. ברוב המקרים, נמליץ להשתמש בשיטה זו כאשר מקימים אתר אינטרנט או כאשר מייצרים דף נחיתה כלשהו.
השיטה של הטמעת כללי ה-CSS בחלק של ה-head תשמש אותנו במקרים בודדים, כחלק מאופטימיזציה למהירות טעינת דפי האינטרנט. לא נתעמק בנושא זה במאמר הנוכחי, רק נסביר בקצרה שלעיתים נרצה דווקא שחלק מכללי ה-CSS (לא כולם) יופיע כבר בחלק של ה-head במקום בקובץ נפרד, על מנת שהתצוגה של אלמנטים above the fold (אלו הם אלמנטים שרואים אותם ישירות בכניסה לעמוד ללא צורך בגלילה של העמוד מטה) תהיה מהירה יותר. כל עוד לא עושים אופטימיזציה למהירות, תמיד נעדיף להפריד את כל כללי ה-CSS לקובץ חיצוני.
השיטה של הטמעת כללי ה-CSS בצורה מובנית ישירות בין תגיות ה-HTML אינה מומלצת כלל. היא נעשית רק כמוצא אחרת, כאשר אין יכולת להשתמש בקובץ CSS חיצוני. כאשר משתמשים בעורכי תוכן שמשולבים במערכות ניהול אתרי אינטרנט, שינויים בעיצוב התוכן (כגון, הגדלת הגופנים, שינויי צבע וכן הלאה) מוסיפים כללי CSS מובנים בתוך תגיות ה-HTML של הקוד שעורך התוכן מחולל. זו, אגב, אחת הסיבות שכאשר מנהלים אתר אינטרנט ועורכים את דפי האתר השונים, מומלץ שלא לעצב את הטקסט שעורכים בצורה חזרתית. כלומר, אם רוצים שכל דפי האתר יהיו עם גופן בגודל או בצבע שונה ממה שנקבע באתר כברירת המחדל שלו, אז במקום לשנות את העיצוב באופן חזרתי בכל עמוד ועמוד בנפרד בעורך התוכן, צריך לשנות זאת פעם אחת בצורה גורפת בהגדרות העיצוב של האתר. באופן הזה, לא יוטמעו כללי CSS בין תגיות ה-HTML של האתר, וקובץ ה-HTML ישאר מצומצם, קל לתחזוקה ומהיר יותר.
