לא מזמן שוחחתי עם חבר על שיטות טובות יותר לכתיבת CSS, כתוצאה מהשיחה הזו גיבשנו 5 טיפים טובים לכתיבה טובה יותר של CSS. לא צריך ליישם את כולן עכשיו, אבל ללא ספק מדובר ב-5 יעדים קלים לזכירה שאפשר ורצוי ליישם. אני אתחיל מייד בפרויקט הבא. 🙂
כאשר מדברים על כתיבה יותר טובה, מדברים בדרך כלל על CSS יותר נקי וקריא שיכול לשמש אתכם בעתיד באתרים נוספים וכמובן יהיה לכם הרבה יותר קל לתקן אותו אם משהו ישתבש.
1. לבצע ריסט ל-CSS
הנה מאמר קצר בנושא הכל כך פשוט אך כל כך חשוב הזה.
ואגב, המנעו מלכתוב * בריסט שלכם (או בכלל ב-CSS שלכם) זה מאט את טעינת הדף.
2. סידור הפרמטרים לפי סדר ה-ABC
הנה דוגמא טובה, שימו לב איך סידור הפרמטרים לפי סדר ה-ABC מקל למצוא את כל הפרמטרים.
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
3. סידור הגיוני לפי קטגוריות
כדאי להשתמש בהערות על מנת לחלק את ה-CSS לחלקים ולתתי חלקים – למשל Header וחלקיו השונים ואז container וחלקיו השונים. כדאי להשתמש בשמות מקובלים לקטגוריות – footer, header ו-container נחשבים לשמות מקובלים.
4. עקביות
הכי מעצבן זה לראות קוד כזה:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
לא משנה באיזו שיטה אתם משתמשים, תהיו עקביים בקוד שאתם כותבים. ואנא, הקפידו על ריווח עקבי בכל ה-CSS שלכם.
5. כתבו את ה-HTML לפני ה-CSS
פה מדובר בנקודה חשובה, על מנת שיהיה לכם CSS נכון אתם צריכים HTML נכון שבנוי היטב וכדאי לכתוב אותו קודם ולהוסיף את ה-CSS אחר כך. כך גם אפשר לכתוב CSS באמצעות כמה שפחות class ו-id ולשמור על ה-HTML נקי וקריא. נסו להשתמש בהורשה הקיימת ב-CSS ופחות ב-class וב-id.