איך לכתוב קובץ CSS נכון (Best practices) - חלק א'

שלבים

1. 1

   שלב 1

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

   שלב 2

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

   שלב 3

   כאשר אתם כותבים חוקי CSS, חלקכם משתמשים בשורה אחת וחלקכם משתמשים במספר שורות כך:
5. 4

   שלב 4

   .BigDiv { background: blue; border: 1px solid black; } .BigDiv { background: blue;border: 1px solid black; }
6. 5

   שלב 5

   שני חוקי הCSS בדוגמא הקודמת עושים אותו הדבר וצורת הכתיבה של שניהם נכונה. פה נכנס עניין הנוחות, בחרו את הצורה הנוחה ביותר בשבילכם לקריאה אך הצמדו אליה, אל תעשו חצי מהקוד בצורה כזו וחצי בצורה אחרת - זה מקשה על קריאת הקובץ. כמו כן, השתמשו בשמות רלוונטיים, המנעו משימוש בשמות לסלקטורים שלא מעידים על תפקיד הסלקטור (כמו moshe, div1, X,Y וכדומה).
7. 6

   שלב 6

   השתמשו בהערות! קוד עם הערות יחסוך לכם המון זמן כאשר תתחזקו את קובץ הCSS ויקל על הקריאה שלו. הערות צריכות להיות ברורות ולהעיד על תפקיד חוק הCSS. דוגמא להערה בCSS:
8. 7

   שלב 7

   /*-- Big Div in the middle --*/ .BigDiv { background: blue;border: 1px solid black; }
9. 8

   שלב 8

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

    שלב 9

    /*---GENERIC---*/ /*---HEADER---*/ /*---CONTENT---*/ /*---MAIN MENU ---*/ /*---SIDE MENU---*/ /*---FOOTER---*/
11. 10

    שלב 10

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

    שלב 11

    את מבנה הCSS שלכם מומלץ לבנות מהכללי לפרטני, כלומר, לעצב תחילה את הדברים הכלליים, אח"כ את הheader, לאחר מכן את התוכן, את התפריטים וכך הלאה (כתבו מלמעלה למטה).
13. 12

    שלב 12

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

    שלב 13

    #Mainbox { background: #blue; border: 1px solid black; padding: 10px; } #SmallBox { background: #blue; border: 1px solid black; padding: 10px; } #SmallestBox { background: #blue; border: 1px solid black; padding: 10px; }
15. 14

    שלב 14

    ניתן לקבץ לסלקטור אחד:
16. 15

    שלב 15

    #Mainbox, #SmallBox, #SmallestBox { background: #blue; border: 1px solid black; padding: 10px; }
17. 16

    שלב 16

    במידה ויש לכם סלקטורים הדומים מאוד פרט למאפיין אחד או שניים, ניתן להשתמש בMultiple Classes. לדוגמא:
18. 17

    שלב 17

    .MainText { background: blue; color: white; font-weight: italic; padding: 5px; } .SecondText { background: blue; color: white; font-weight: italic; padding: 5px; float: left; }
19. 18

    שלב 18

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

    שלב 19

    .MainText { background: blue; color: white; font-weight: italic; padding: 5px; } .LeftFloat{ float: left; } לעשות כך HTML ובדף
21. 20

    שלב 20

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