למה פסיק פשוט מפשט קידוד
CSS, או גיליונות סגנון מדורגים, הם הדרך המקובלת של תעשיית עיצוב אתרים להוסיף סגנונות חזותיים לאתר. עם CSS, אתה יכול לשלוט על פריסת הדף, צבעים, טיפוגרפיה , תמונת רקע, ועוד. בעיקרון, אם זה סגנון חזותי, אז CSS היא הדרך להביא את סגנונות אלה לאתר האינטרנט שלך.
כאשר אתה מוסיף סגנונות CSS למסמך, ייתכן שתראה שהמסמך מתחיל להיות ארוך יותר. גם אתר קטן עם רק קומץ עמודים יכול בסופו של דבר עם קובץ CSS ניכר - ואתר גדול מאוד עם הרבה והרבה עמודים של תוכן ייחודי יכול להיות קבצי CSS גדולים מאוד. זה מורכב על ידי אתרי תגובה כי יש הרבה שאילתות מדיה הכלולים גיליונות סגנון לשנות את המראה של חזותיים ואת הדף מניח עבור מסכים שונים.
כן, קבצי CSS יכולים לקבל זמן רב. אין זו בעיה רצינית כשמדובר בביצועי האתר ובמהירות ההורדה, שכן אפילו קובץ CSS ארוך עשוי להיות די קטן (מכיוון שזה באמת רק מסמך טקסט). ובכל זאת, כל ספירה קטנה כשמדובר מהירות הדף, אז אם אתה יכול לעשות גיליון הסגנון שלך רזה יותר, זה רעיון טוב. זה המקום שבו "פסיק" יכול לבוא שימושי מאוד בגיליון הסגנון שלך!
פסיקים ו- CSS
ייתכן שיהיה תוהה איזה תפקיד הפסיק משחק בתחביר הבורר CSS . כמו במשפטים, הפסיק מביא בהירות - לא קוד - למפרידים. הפסיק במבחר CSS מפריד בין בוררים מרובים בתוך אותם סגנונות.
לדוגמה, הבה נסתכל על CSS למטה.
{צבע: אדום; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }
עם תחביר זה, אתה אומר שאתה רוצה תגים th , תגים td , תגי פסקה עם הכיתה האדומה, ואת תג div עם קוד זיהוי הראשון כל יש את צבע הסגנון האדום.
זה מקובל לחלוטין CSS, אבל יש שני חסרונות משמעותיים לכתוב את זה ככה:
- בעתיד, אם תחליט לשנות את צבע הגופן של מאפיינים אלה לכחול, עליך לשנות זאת ארבע פעמים בגיליון הסגנונות שלך.
- זה מוסיף הרבה תווים נוספים לגיליון הסגנון שלך כי אתה לא צריך. אלה 4 סגנונות אולי לא נראה כמו overkill, אבל אם תמשיך לעשות את זה על פני כל הסגנון שלך, שורות יוסיף את זה ואת הסדין יהיה הרבה, הרבה יותר גדול ממה שהוא צריך להיות.
כדי למנוע את החסרונות הללו ולייעל את קובץ ה- CSS, ננסה להשתמש בפסיקים.
שימוש בפסיקים לבחירת בוררים
במקום לכתוב 4 בוררי CSS נפרדים ו -4 כללים, ניתן לשלב את כל סגנונות אלה למאפיין אחד על ידי הפרדת סלקטורים בודדים עם פסיק. הנה איך זה ייעשה:
th, td, p.red, div # firstred {color: red; }
תו הפסיק בעצם פועל כמילה "ו" בתוך הבורר. אז זה חל על תגי h ותגי td ותגיות פסקה עם הכיתה האדומה והתג div עם מזהה הראשון. זה בדיוק מה שהיה לנו בעבר, אבל במקום צורך 4 כללי CSS, יש לנו כלל אחד עם בוררים מרובים. זה מה פסיק עושה בורר, זה מאפשר לנו יש בוררים מרובים כלל אחד.
לא רק גישה זו עושה עבור קבצים רזה יותר, נקי יותר, זה גם עושה עדכונים עתידיים הרבה יותר קל. עכשיו אם אתה רוצה לשנות את הצבע מאדום לכחול, אתה רק צריך לעשות את השינוי במיקום אחד במקום בכל המקובל 4 כללי סגנון היה לנו! תחשוב על חיסכון בזמן זה על פני קובץ CSS שלם ואתה יכול לראות איך זה יחסוך לך זמן ומרחב ברונה הארוך!
גרסת תחביר
חלק מהאנשים בוחרים להפוך את ה- CSS לקריא יותר על ידי הפרדת כל בורר בשורה נפרדת, במקום לכתוב את הכל בשורה אחת כנ"ל. כך זה ייעשה:
th,
td,
p.red,
הע להשפיע
{
צבע אדום;
}
שים לב כי אתה מקום פסיק אחרי כל בורר ולאחר מכן להשתמש "Enter" כדי לשבור את הבא בורר על השורה שלו. אתה לא מוסיף פסיק לאחר בורר הסופי.
באמצעות פסיקים בין הסלקטורים שלך, אתה יוצר גיליון סגנונות קומפקטי יותר שקל לעדכן בעתיד וקל יותר לקרוא אותו היום!
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב 5/8/17