כל אתר מורכב מאלמנטים מבניים, פונקציונליים וסגנוניים. גליונות סגנון מדורגים להכתיב את המראה ("המראה וההרגשה") של אתר. סגנונות אלה נשמרים ממבנה ה- HTML כדי לאפשר עדכון קל ועמידה בתקני האינטרנט.
הבעיה בגיליונות סגנונות
עם הגודל והמורכבות של אתרים רבים כיום, גיליונות סגנונות יכולים להיות די ארוכים ומסורבלים. הבעיה הזו גדלה במורכבות עכשיו שאילתות מדיה ל סגנונות אתרים מגיבים מהווים חלק חיוני בתכנון, ומבטיחים שאתר אינטרנט נראה כמו שצריך ללא קשר למכשיר. שאילתות מדיה אלה בלבד יכולות להוסיף מספר משמעותי של סגנונות חדשים למסמך CSS, מה שמקשה עוד יותר על העבודה איתו. ניהול מורכבות זו הוא המקום בו הערות CSS יכולות להפוך לעזר רב ערך עבור מעצבי אתרים ומפתחים.
הערות מוסיפות מבנה ובהירות
הוספת הערות לקבצי CSS של אתר מארגנת קטעי קוד זה עבור קורא אנושי הסוקר את המסמך. זה גם מבטיח עקביות כאשר מקצוען אינטרנט אחד מפסיק לאן אחר מפסיק, או כאשר צוותי אנשים עובדים באתר.
הערות מעוצבות היטב מעבירות היבטים חשובים בגליון הסגנון לחברי צוות שאולי לא מכירים את הקוד. הערות אלה מועילות גם לאנשים שעבדו באתר בעבר אך לא לאחרונה. מעצבי אתרים עובדים בדרך כלל באתרים רבים, וזכירה של אסטרטגיות עיצוב מאחד לשני היא קשה.
לעיני המקצוענים בלבד
הערות CSS אינן מוצגות כאשר הדף נכנס פנימה דפדפני אינטרנט. הערות אלה אינפורמטיביות, בדיוק כמו הערות HTML הם (אם כי התחביר שונה). הערות CSS אלה אינן משפיעות על התצוגה החזותית של אתר בשום צורה שהיא.
הוספת הערות CSS
הוספת הערת CSS היא די קלה. הזמן את ההערה שלך עם תגיות הפתיחה והסגירה הנכונות:
התחל את התגובה שלך בהוספה /* וסגור אותו עם */.
כל מה שמופיע בין שני התגים הללו הוא תוכן ההערה, גלוי רק בקוד ולא מעובד על ידי הדפדפן.
הערת CSS יכולה לכלול מספר שורות כלשהו. להלן שתי דוגמאות:
/ * דוגמה לגבול אדום * /
div # border_red {
גבול: אדום מוצק דק;
}
/***************************
****************************
סגנון לטקסט קוד
****************************
***************************/
פריצת מדורים
מעצבים רבים מארגנים גיליונות סגנונות בנתחים קטנים וניתנים לעיכול וקל לסריקה בעת קריאה. בדרך כלל תראה הערות שקדמו ואחריהן סדרות של מקפים שיוצרים הפסקות גדולות וברורות בעמוד שקל לראות. הנה דוגמה:
/ * כותרות סגנונות * /
הערות אלה מצביעות על תחילתו של קטע קידוד חדש.
קוד תגובה
מכיוון שתגי התגובות אומרים לדפדפן להתעלם מכל מה שביניהם, תוכלו להשתמש בהם בכדי להשבית זמנית חלקים מסוימים בקוד CSS. טריק זה יכול להיות שימושי בעת ניפוי באגים, או בעת התאמת עיצוב דפי האינטרנט. למעשה, לעתים קרובות מעצבים משתמשים בהם כדי "להגיב" או "לכבות" אזורי קוד כדי לראות מה קורה אם קטע זה אינו חלק מהדף.
הוסף את תג התגובה הפותח לפני הקוד שברצונך להגיב (השבת); מקם את תג הסגירה במקום בו ברצונך שהחלק המושבת יסתיים. שום דבר בין התגים הללו לא ישפיע על התצוגה החזותית של אתר, מה שיעזור לך לבצע ניפוי באגים ב- CSS כדי לראות היכן מתרחשת בעיה. לאחר מכן תוכל להיכנס ולתקן רק את התקלה הזו ואז להסיר את ההערות מהקוד.
טיפים להערות CSS
קודנים רבים כוללים חסימות תגובה בחלק העליון של כל קובץ חדש עם קוד. לחקות את האסטרטגיה הזו על ידי הכללת בלוק תגובות עם שמך, תאריכים רלוונטיים ומידע קשור כדי לעזור אנשים מבינים את ההקשר של פרויקט ולא רק החלטות לגבי המתרחש ביחס לקוד ספציפי לַחסוֹם.