אינך מוגבל למעמד CSS אחד לכל אלמנט.
גיליונות סגנון מדורגים (CSS) מאפשרים לך להגדיר את המראה של אלמנט על-ידי התחברות אל התכונות החלות על אלמנט זה. תכונות אלה יכולות להיות זהות ומזהה או כיתה, וכמו כל התכונות, הן מוסיפות מידע מועיל לגורמים שאליהן הם מחוברים. תלוי באיזו תכונה אתה מוסיף אלמנט, אתה יכול לכתוב בורר CSS כדי להחיל את הסגנונות החזותיים הדרושים כי יש צורך להשיג את המראה והתחושה של אלמנט זה ואת האתר כולו.
בעוד IDs או שיעורים לעבוד לצורך משדלת אותם עם הכללים CSS, מודרני עיצוב אתרים שיטות לטובת שיעורים על תעודות זהות, בין השאר, כי הם פחות ספציפיים וקל יותר לעבוד עם הכולל. כן, עדיין תמצאו אתרים רבים המשתמשים במזהים, אך תכונות אלה מיושמות באופן משורי יותר מבעבר, בעוד שהשיעורים השתלטו על דפי אינטרנט מודרניים.
כיתות בודדות או מרובות ב- CSS?
ברוב המקרים היית להקצות תכונה מחלקה אחת אלמנט, אבל אתה בעצם לא רק בכיתה אחת הם בדרך שבה אתה עם תעודות זהות. בעוד אלמנט יכול רק תכונה אחת מזהה, אתה יכול בהחלט לתת אלמנט מספר רב של כיתות, ובמקרים מסוימים, עושה את זה יגרום לדף שלך קל יותר בסגנון הרבה יותר גמיש!
אם עליך להקצות מספר מחלקות לאלמנט, תוכל להוסיף את הכיתות הנוספות ולפשוט להפריד אותן עם רווח בתכונה שלך.
לדוגמה, סעיף זה כולל שלושה סוגים:
pullquote מובלט שמאלה "> זה יהיה הטקסט של הפסקה
פעולה זו מגדירה את שלושת הסוגים הבאים בתג הפיסקה:
- פולקוטה
- מומלצים
- שמאלה
שימו לב לרווחים בין כל אחד מערכי הכיתה. מרחבים אלה הוא מה שמגדיר אותם כמו שיעורים שונים, בודדים. זה גם למה שמות בכיתה לא יכול להיות רווחים בהם, כי זה היה להגדיר אותם ככיתות נפרדות.
לדוגמה, אם השתמשת ב- "pullquote-feature-left" ללא רווח, זה יהיה ערך מחלקה אחת, אבל הדוגמה שלמעלה, כאשר שלוש המילים מופרדות עם רווח, קובעת אותן כערכים בודדים. חשוב להבין את המושג הזה כאשר אתה מחליט אילו ערכים בכיתה להשתמש בדפי האינטרנט שלך.
ברגע שיש לך את ערכי הכיתה ב- HTML, תוכל להקצות אותם ככיתות ב- CSS ולהחיל את הסגנונות שברצונך להוסיף. לדוגמה.
.pullquote {...}
.מומלצים { ... }
p.left {...}
בדוגמאות אלה, הצהרות CSS וערכים זוגות יהיה בתוך הפלטה מסולסל, וזה איך סגנונות אלה יחולו על בורר המתאים.
הערה - אם תגדיר מחלקה לרכיבים מסוימים (לדוגמה, p.left), עדיין תוכל להשתמש בה כחלק מרשימת מחלקות; עם זאת, להיות מודעים לכך שזה ישפיע רק על אותם רכיבים שצוינו ב- CSS. במילים אחרות, הסגנון p.left יחול רק על פסקאות עם מחלקה זו מכיוון שהבורר שלכם אומר למעשה להחיל אותו על "פסקאות עם ערך מחלקה של" שמאל ". לעומת זאת, שני הסלקטורים האחרים בדוגמה אינם מציינים אלמנט מסוים, ולכן הם יחולו על אלמנט כלשהו שמשתמש בערכי מחלקות אלה.
היתרונות של כיתות מרובות
מחלקות מרובות יכולות להקל על הוספת אפקטים מיוחדים לאלמנטים מבלי ליצור סגנון חדש לגמרי עבור אותו רכיב.
לדוגמה, ייתכן שתרצה לקבל את היכולת לצוף אלמנטים שמאלה או ימינה במהירות. אתה יכול לכתוב שתי כיתות שמאלה וימינה עם רק לצוף: שמאל; לצוף: מימין; בהם. לאחר מכן, בכל פעם שיש לך אלמנט אתה צריך לצוף שמאלה, היית פשוט להוסיף את הכיתה "שמאל" לרשימה הכיתה שלה.
יש קו דק ללכת כאן, עם זאת. זכור כי תקני אינטרנט להכתיב את ההפרדה של סגנון ומבנה. המבנה מטופל באמצעות HTML בזמן הסגנון ב- CSS.
אם מסמך ה- HTML שלך מלא במרכיבים שיש להם שמות מחלקה כמו "אדום" או "שמאל", שהם שמות המכתיבים כיצד אלמנטים צריכים להיראות במקום מה שהם, אתה חוצה את הקו בין המבנה והסגנון. אני מנסה להגביל את השמות הלא סמנטיים שלי בכיתה כמה שיותר מסיבה זו.
כיתות מרובות, סמנטיקה ו- JavaScript
יתרון נוסף באמצעות שיעורים מרובים היא שזה נותן לך אפשרויות אינטראקטיביות רבות יותר.
ניתן להחיל מחלקות חדשות על רכיבים קיימים באמצעות JavaScript מבלי להסיר את השיעורים הראשונים. ניתן גם להשתמש שיעורים כדי להגדיר את הסמנטיקה של אלמנט . זה אומר שאתה יכול להוסיף על שיעורים נוספים כדי להגדיר מה זה אלמנט אומר סמנטית. כך פועל Microformats.
חסרונות של כיתות מרובות
החיסרון הגדול ביותר באמצעות שיעורים מרובים על האלמנטים שלך היא שזה יכול לגרום להם קצת מסורבל להסתכל ולנהל לאורך זמן. ייתכן שיהיה קשה לקבוע אילו סגנונות משפיעים על אלמנט ואם תסריטים משפיעים עליו. רבות מהמסגרות הקיימות כיום, כמו Bootstrap, עשו שימוש רב באלמנטים בעלי מספר רב של שיעורים. קוד זה יכול לצאת מכלל שליטה וקשה לעבוד עם מהר מאוד אם אתה לא זהיר.
כאשר אתה משתמש בכיתות מרובות, אתה גם מסתכן בכך שיש את הסגנון של מחלקה אחת לעקוף את הסגנון של אחר אפילו אם לא התכוונת לכך. זה אז יכול להקשות להבין מדוע סגנונות שלך אינם מיושמים גם כאשר נראה כי הם צריכים.
אתה צריך להיות מודע של סגוליות, אפילו עם התכונות החלות על אלמנט אחד!
באמצעות כלי כמו כלי מנהלי האתרים ב- Chrome, תוכל לראות בקלות רבה יותר כיצד השיעורים שלך משפיעים על הסגנונות שלך, והימנע מבעיה זו של סגנונות ומאפיינים מתנגשים.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב- 8/7/17