תפקיד הפסיקים בתחביר בורר CSS

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

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

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

פסיקים ו- CSS

אולי תהיתם איזה תפקיד הפסודה ממלא בתחביר בורר CSS. כמו במשפטים, הפסיק מביא בהירות - ולא קוד - למפרידים. הפסיק ב

בורר CSS מפריד בוחרים מרובים בתוך אותם סגנונות.

לדוגמה, בואו נסתכל על כמה CSS למטה.

ה {צבע: אדום; }
td {צבע: אדום; }
עמ 'אדום {צבע: אדום; }
div # firstreded {צבע: אדום; } 

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

זה CSS מקובל לחלוטין, אך ישנם שני חסרונות משמעותיים לכתוב זאת כך:

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

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

שימוש בפסיקים להפרדת בוחרים

במקום לכתוב 4 בוחרי CSS נפרדים וארבעה כללים, תוכלו לְשַׁלֵב את כל הסגנונות הללו למאפיין כלל אחד על ידי הפרדת בוחרים בודדים בפסיק. כך זה ייעשה:

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

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

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

וריאציה תחבירית

יש אנשים שבוחרים להפוך את ה- CSS לקריא יותר על ידי הפרדת כל בורר בשורה משלו, במקום לכתוב את הכל בשורה אחת כמפורט לעיל. כך זה ייעשה:

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

שים לב שאתה מציב פסיק אחרי כל בורר ואז השתמש ב "enter" כדי לשבור את הבורר הבא לקו משלו. אתה לא מוסיף פסיק אחרי הבורר הסופי.

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