מחשבים

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

התחילו בכתיבת הHTML שלכם תחילה ורק לאחר מכן כתבו את הCSS.

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

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

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


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

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

כמו כן, השתמשו בשמות רלוונטיים, המנעו משימוש בשמות לסלקטורים שלא מעידים על תפקיד הסלקטור (כמו moshe, div1, X,Y וכדומה).

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

דוגמא להערה בCSS:

/*-- Big Div in the middle --*/

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

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

לדוגמא:

/*---GENERIC---*/

/*---HEADER---*/

/*---CONTENT---*/

/*---MAIN MENU ---*/

/*---SIDE MENU---*/

/*---FOOTER---*/

בדוגמא עשיתי חלוקה של אתר כלשהו אבל החלוקה תלויה בכם.
בין ההערות האלו הכניסו את חוקי הCSS המתאימים.

אם אתם עובדים עם אתר גדול מאוד, אפשר אפילו לחלק את החלקים האלו לתת חלקים.

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

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

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

לדוגמא, את הסלקטורים האלו:

#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;
}

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

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

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

לדוגמא:

.MainText {
background: blue;
color: white;
font-weight: italic;
padding: 5px;
}

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

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

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


לעשות כך HTML ובדף