פיתוח אתרי אינטרנט חזיתיים מיוצג לרוב כשרפרף בעל שלוש רגליים המורכב מ:
- HTML למבנה האתר
- CSS לסגנונות הוויזואליים
- Javascript להתנהגויות
הרגל השנייה של שרפרף זה, Cascading Style Sheets, תומכת בשלושה סגנונות שונים שתוכל להוסיף למסמך.
- סגנונות מוטבעים
- סגנונות מוטבעים
- סגנונות חיצוניים
כל אחד מסגנונות CSS אלה מציג יתרונות וחסרונות ייחודיים.
סגנונות מוטבעים
סגנונות מוטבעים הם סגנונות שנכתבים ישירות בתג במסמך ה- HTML. סגנונות מוטבעים משפיעים רק על התג הספציפי עליו הם מוחלים:
כלל CSS זה מבטל את קישוט הטקסט הרגיל בקו תחתון לקישור אחד זה. עם זאת, זה לא ישנה שום קישור אחר בדף. זו אחת המגבלות של סגנונות מוטבעים. מכיוון שהם משתנים רק בפריט ספציפי, יהיה עליך לזרוק את ה- HTML שלך בסגנונות אלה כדי להשיג עיצוב דף מאוחד. זה לא שיטה מומלצת: למעשה, זה צעד אחד שהוסר מימיו של גוֹפָן תגים ותערובת המבנה והסגנון בדפי האינטרנט.
סגנונות מוטבעים דורשים גם ספציפיות גבוהה מאוד. זה מקשה עליהם להחליף סגנונות אחרים שאינם מוטבעים. לדוגמא, אם ברצונך להפוך את האתר לרספונסיבי ולשנות את האופן שבו אלמנט מסתכל בנקודות שבר מסוימות באמצעות שאילתות מדיה, סגנונות מוטבעים על אלמנט מקשים על כך.
סגנונות מוטבעים מתאימים רק כשמשתמשים בהם במשורה, בגישה "חריג לכלל" המגדילה אלמנט אחד או שניים מעמיתיהם בעמוד.
סגנונות מוטבעים
בראש המסמך סגנונות מוטבעים. הם עטופים בפנים תגים ונראים כמו קבצי CSS חיצוניים בחלק זה של המסמך.
סגנונות מוטבעים משפיעים רק על התגים בדף שהם משובצים בו. שוב גישה זו מבטלת את אחת מהעוצמות של CSS. מכיוון שכל עמוד כולל סגנונות שהוגדרו בכותרת, אם ברצונך לבצע שינוי בכל האתר - כמו שינוי הצבע של קישורים מאדום לירוק - יהיה עליכם לבצע שינוי זה בכל עמוד, מכיוון שכל עמוד משתמש בסגנון מוטבע דַף. גישה זו טובה יותר מסגנונות מוטבעים אך עדיין בעייתית במקרים רבים.
גיליונות סגנונות שמתווספים לראש המסמך מוסיפים לדף גם כמות משמעותית של קוד סימון, מה שעלול גם להקשות על ניהול הדף בעתיד.
היתרון של גיליונות סגנון משובצים בכך שהם נטענים מיד עם הדף עצמו, במקום לדרוש טעינה של קבצים חיצוניים אחרים. טכניקה זו יכולה להיות תועלת מנקודת מבט של מהירות הורדה ופרפורמנס.
גיליונות סגנון חיצוניים
מרבית האתרים כיום משתמשים בגיליונות סגנון חיצוניים. סגנונות חיצוניים הם סגנונות שנכתבים במסמך נפרד ואז מצורפים למסמכי רשת שונים. הם נקראים למסמך הראשי באמצעות תג בראש המסמך. גיליונות סגנון חיצוניים יכולים להימצא על אותו שרת כמו ה- HTML, או שהם יכולים להימשך משרת אחר לחלוטין. לרוב זה המקרה בנכסים, כמו גופנים, שאתרים רבים לווים מגוגל.
גליונות סגנון חיצוניים משפיעים על כל מסמך אליו הם מצורפים, מה שאומר שאם יש לך אתר בן 20 עמודים שכל עמוד משתמש באותו גיליון סגנונות (בדרך כלל זה נעשה), אתה יכול לבצע שינוי חזותי לכל אחד מהדפים האלה על ידי עריכה פשוט של סגנון זה דַף. כלכלה זו מקלה על ניהול האתר לטווח הארוך.
רוב מעצבי האתרים המקצועיים משתמשים בקובץ CSS ראשי כדי לקבוע את פריסת האתר ואת עיצובו.
החיסרון בגיליונות הסגנון החיצוניים הוא שהם דורשים דפים לאחזור וקבצים חיצוניים אלה. לא כל עמוד ישתמש בכל סגנון בגליון CSS, כך שדפים רבים יטענו עמוד CSS גדול בהרבה ממה שצריך בפועל.
אמנם נכון שיש להיט ביצועים עבור קבצי CSS חיצוניים, אך בהחלט ניתן למזער אותו. באופן מציאותי, קבצי CSS הם רק קבצי טקסט, ולכן מלכתחילה הם אינם גדולים. אם כל האתר שלך משתמש בקובץ CSS יחיד, אתה גם מקבל את היתרון בכך שמסמך נשמר במטמון לאחר הטעינה הראשונית, כלומר ייתכן שיש להיט ביצועים קל בעמוד הראשון עבור ביקורים מסוימים, אך העמודים הבאים ישתמשו בקובץ CSS במטמון, כך שכל פגיעה תהיה בשלילה.