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 תגובות