4 כללים שיכולים ליעל את ה-css שלכם

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

בתחתית הפוסט מוטמעות כל הדוגמאות שהכנתי ב-codepen.

כללים

1. אפשר להגדיר גבול מבלי לכתוב צבע

כידוע, כדי להגדיר גבולות לאלמנט (border), יש צורך להגדיר שלושה ערכים: עובי הגבול, סוג הגבול (מקווקו/רציף/כפול), וצבע של הגבול. אם צבע הגבול הוא כמו צבע הטקסט שבאלמנט, אפשר להשמיט את הגדרת הצבע.

border: 1px solid;

2. אפשר להגדיר צבעי גבול דרך border-color לפי כיוון השעון

כשמגדירים ריפוד (padding) ושוליים (margin), ניתן לכתוב בצורה מקוצרת. למשל, אם כותבים margin ונותנים לו ארבעה ערכים, המופרדים ביניהם ברווחים, הראשון יחול למעלה, השני מימין, השלישי למטה והרביעי משמאל (כיוון השעון). מה שהרבה אנשים לא יודעים הוא שאותו הדבר נכון לגבי צבעי גבולות. ניתן להגדיר ארבעה ערכים בשורה אחת, והם יגדירו את הצבע מכל צד.

border-color: #aaa #999 #777 #999;

3. ניתן להגדיר פונט, משקל, סגנון ורווח בין שורות בשורה אחת

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

font: italic bold 12px/1.5 arial, sans-serif;

4. כשמציפים אלמנט, או מגדירים לו מיקום אבסולוטי הוא הופך לבלוק

אלמנטים כמו span הם בברירת המחדל אינליינים, מה שאומר שהם לא יקבלו הגדרת גובה, למשל. אפשר לתקן את זה על ידי הגדרת תצוגת בלוק (display:block). אך אם האלמנט מוצף (float) או שהוא ממוקם אבסולוטית, הוא אוטומטית מקבל יכולות של בלוק - ניתן להגדיר לו גובה, רוחב, שוליים אנכיים וריפוד אנכי.

span {
position: absolute;
display: block; /* אין צורך בהגדרה זו */
}
span {
float: left;
display: block; /* אין צורך בהגדרה זו */
}

דוגמאות

See the Pen cgDmn by Lavi Perchik (@laviperchik) on CodePen

תגיות:,

7 תגובות

  1. יפה! את כלל 1 ו4 לא הכרתי. מאוד שימושי.
    תודה על השיתוף!
    שאלה לגבי כלל 4 – האם זה נחשב גם בדפדפנים ישנים של IE?

  2. מעניין.
    יכול להיות בעיתי בעבודה של צוות כי הקוד הופך להיות פחות מפורט. למשל במקרה של הכלל הראשון שינוי של צבע טקסט ישפיע ישירות על צבע גבול…

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

      אבל עדיין, הכללים האלו שימושיים במקרים ספציפיים.

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

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

    מיקי
    • היי מיקי,
      תודה על ההצעה.
      בפוסט הזה רציתי להתייחס דווקא לתקנים שהרבה אנשים לא מכירים. והאמת שחשבתי להמשיך עם פוסט שמדבר על כללי css3 שאנשים לא מכירים.
      אם להתייחס לשתי הדוגמאות שהבאת:
      1. important זה אחד הדברים הכי גרועים שאפשר להשתמש בהם, למעט מקרים מיוחדים, כי זה יוצר מלחמות של ספציפיות שקשה לצאת מהם.
      2. אני אישית לא משתמש בכוכביות וכו' בשביל ie, אלא בטכניקה אחרת. אם זה מעניין אותך יש את האתר browser hacks שמרכז את כל ההאקים שקשורים לדפדפנים.