קיבוץ בוחרי CSS מרובים במאפיין סגנון אחד

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

כיצד לקבץ בוחרי CSS

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

div, p {color: # f00; }

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

אתה יכול לקבץ כל צורה של בורר עם כל בורר אחר. דוגמה זו מקבצת בורר כיתות עם בורר תעודת זהות:

p.red, #sub {color: # f00; }

סגנון זה חל על כל פיסקה עם התכונה class של אָדוֹם וכל אלמנט (מכיוון שהסוג אינו מצוין) עם תכונת מזהה של תַת.

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

p, .red, #sub, div a: link {color: # f00; }

כלל CSS זה יחול על:

• כל רכיב פיסקה
• כל אלמנט עם הכיתה של אָדוֹם
• כל אלמנט עם מזהה תַת
• ה קישור מעמד פסאודו של יסודות העוגן שהם צאצאי חלוקה.

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

ניתן לקבץ כל בורר

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

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

th, td, p.red, div # firstreded {צבע: אדום; }

או שאתה יכול לרשום את הסגנונות בשורות בודדות לשם הבהרה:

ה,
td,
עמ 'אדום,
div # שרוך אשוח
{
צבע אדום;
}

מדוע בוחרים קבוצות CSS?

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

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

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