הקבצה של בוררי CSS מרובים

קבוצת מרובים CSS בוררים כדי לשפר את מהירות הטעינה

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

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

בוררי קבוצות

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

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

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

כיצד קבוצת בוררי CSS

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

div, p {color: # f00; }

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

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

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

אז הסגנון הזה חל על כל פסקה עם המאפיין class של "red", ו- all element (מכיוון שלא ציין איזה סוג) שיש לו מזהה מזהה של "תת".

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

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

לכן כלל CSS זה יחול על הדברים הבאים:

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

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

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

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

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

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

th, td, p.red, div # firstred {color: red; }

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

th,
td,
p.red,
הע להשפיע
{
צבע אדום;
}

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

מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב 5/8/17.