טיפים לארגון קובץ CSS

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

• פשטות – אם יוצא לך CSS מסובך, יתכן שהתפיסה שלך לגבי העיצוב מוטעית, וצריך לנסות כיוון אחר
• קוד אלגנטי – להשתמש בהזחות (אינדנטציות), רווחים והערות כדי להפריד בלוקים של קוד
• מתודיקה – להשתמש בכללים קבועים למתן שמות ל-classים ול-id-ים.
• לעשות reset לכל הדיפולטים של הדפדפנים. יש על זה מאמר מקיף של אריק מאייר
• לכתוב את הקוד לפי סדר הופעתו בדף (יש לכלל הזה סתירות במאמרים אחרים)

יש במאמר קודים לדוגמה, כדאי להציץ.
המאמר השני שנקרה בדרכי נכתב ב-smashing magazine, וכדרכם בקודש הוא ארוך וממצה. במאמר יש 70 טיפים של מומחים. הם כוללים לא רק עצות על איך לארגן את הקוד, אלא גם עניינים טכניים: איך לדבג שגיאות CSS (לצייר border-ים לאלמנטים), איך להתמודד עם כל מיני בעיות ש-CSS ו-HTML מציבים (למשל, איך לעצב קישורים בשונה מ-anchor [שגם הוא <a>]). הם גם נותנים טיפים איך להשתמש בכללי CSS בשימושים לא קונבנציונליים (למשל לעצב את תגית HR ולהשתמש בה כהפרדה בין פוסטים), וגם טיפים להתמודדות עם IE (כמו איך להשתמש ב-PNG שקוף, או איך להגדיר min-width ו-max-width). כמה מהטיפים הכלליים שלהם כוללים:

• ליצור קובץ master css
• להכין תוכן עניינים
• להכין ספריה של class-ים שימושיים
• ועוד כללים שמופיעים גם במאמר הקודם

המאמר השלישי מתמקד באופן כתיבת הקוד: הקפדה על הזחות, איפה לשים את הסוגר המסולסל הפותח {, באיזה סדר לכתוב את כללי ה-CSS לקישורים. יש במאמר הזה מן הפדנטיות, אבל אם לא לקוחים את ההצעות שלו לקיצוניות, הוא נראה הגיוני מאד. המאמר הרביעי הוא מבית היוצר של המאמר הראשון, ושם הוא מספר באיזה סדר הוא כותב את הקוד בקןבץ ה-CSS. כאמור כבר במאמר הראשון, לא כל המאמרים דוגלים באותה שיטה (ונראה לי שהשיטה שהוא כותב פה שונה מהשיטה שהוא מתאר במאמר הראשון…): דבר ראשון – לעשות reset לדיפולטים; דבר שני – להגדיר אלמנטים כלליים של הדף; דבר שלישי – להגדיר classים ספציפיים. הוא גם מתייחס לשאלת ההזחה ולשאלת השאלות: האם להגדיר כללים בשורה אחת, או שכל כלל מקבל שורה משלו.
המאמר החמישי הוא בעצם screencast ב-CSS tricks על איך לסדר את ה-css. לא בטוח שהוא כל כך מחדש, אבל ייחודו הוא בכך שהוא מראה דוגמאות מהחיים של עשה ואל-תעשה.
ואסיים את החלק הזה של הפוסט במאמר מבית מוזילה. המאמר הזה מכיל כמה טיפים שסותרים מאמרים אחרים (כמו למשל, למעט להשתמש ב-child selectors, שיטה שדווקא מומלצת במאמר של smashing magazine). יתכן שהסיבה לזה היא רצונם לעודד מהירות, וזה בא על חשבון סדר וקריאות (readbility), אז צריך לקחת את הטיפים האלה בערבון מוגבל.
יש עוד כמה מאמרים שלא היה מספיק מה לצטט מהם, אבל הם גם קשורים לנושא:
12 מאמרים וכלים לבניית CSS ואופטימיזציה שלו
גישת “מלמעלה-למטה” לפישוט CSS
איך להתחיל עם CSS, וטיפים לתיקון באגים
ולסמשינג מגזין יש רשימה של כלי-CSS המסייעים בפיתוח (כמו למשל כלי שיוצר HTML לפינות עגולות, כלי שמייצר CSS לטפסים, ועוד כמה וכמה, כמו שרפי רשף נהג לומר).
ולסיום, כמה קישורים שמראים שגם את התחום הזה אפשר לקחת לפדנטיות קיצונית (ואם זה טוב או רע – תחליטו בעצמכם 🙂 ):
מר CSS-Tricks מספר על ג’ף מ-Perishable Press שכתב סדרת פוסטים שעניינם סדר וארגון אובססיבי של CSS:
סידור כללי ה-CSS מהארוך ביותר לקצר ביותר, הזחה וריווח אובססיביים ו-פתיחת סוגריים וסגירתם – ההיבט האובססיבי.
ולהשומע ינעם!