אם יש משהו שאני אוהבת לעשות, מלבד לעצב ולכתוב קוד CSS כמובן, זה לסדר. בזמן האחרון עברו תחת ידי כמה פרויקטים שהזדקקו לסדר. אמנם לא בגלל זה הם הגיעו אלי, אלא בשל עבודות תחזוקה שונות – תיקונים, הוספות ושינויים – אבל אין כמו לנצל את העובדה ששוב פותחים את הקבצים כדי לרענן קצת את הקוד 🙂
קריס קויר כתב בפוסט שלו:
Revisit sections of your site on purpose. Probably not just because you want to clean up the CSS there, but because you want to make that section of your site better in some way, for everyone. I find that every time I revisit an area, it's an opportunity to clean up all the code that touches it. That helps me feel connected to and less afraid of old code.
ככה אני מרגישה לגבי חזרה אל פרויקטים שהיו שלי. אז נכון – בדרך כלל אני לא יוזמת גיחות לביקור בקוד שכתבתי, אבל החיים מזמנים לי את הביקורים האלו. לפעמים אני קצת מזועזעת לראות מה עשיתי (זה היה רק לפני חצי שנה – מה חשבתי לעצמי כשכתבתי ככה את ה CSS ?!) אבל שמחה להזדמנות לעשות סדר ולשפר את הקוד.
אין לי עדיין מתודולוגיה מסודרת איך לסדר את הקוד, אבל לאט לאט אני צוברת מאפיינים שמתחבבים עלי בארגון קובץ ה-CSS. כשאני מקבלת קוד שלא אני כתבתי, דבר ראשון שאני אוהבת לעשות זה לחלק את קובץ לחלקים לפי מבנה העמוד ולתת להם כותרות ברורות בהערה, לדוגמה:
/*********************************/ /********** HEADER ***************/ /*********************************/ או: /* -----------------------------------*/ /* ---------->>> HEADER <<<-----------*/ /* -----------------------------------*/
אפשר להוסיף בראש הקובץ גם תוכן עניינים. לא תמיד אני עושה את זה, במיוחד לא בקוד שכבר כתוב. לפעמים אני ממספרת את האזורים ונותנת תתי כותרות עם תתי מספור. בפוסט הזה של סמאשינג מאגזין, שאמנם די ישן, אפשר לראות דוגמאות טובות לארגון הקובץ.
אחרי שהקוד מחולק לאזורים הגיוניים, הרבה יותר קל לסרוק אותו ולהבין את ההיררכיות. בכל חלק אני מתחילה לסדר לפי סדר בניית האתר. למשל ב-header יש לוגו, כותרת משנה, חיפוש וניווט. אז את ה-CSS אני אסדר בצורה כזאת:
/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/
header{
/*some style that applies to the whole section such as:*/
padding: 1rem;
}
.wrapping div{
width: 70%;
}
/* --Logos--*/
.logo{
}
.slogan{
}
.search{
width: 30%;
}
/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/
....
עכשיו אפשר להתחיל להתעסק עם הפרטים הקטנים. אני בודקת שאין כפילויות בכתיבה של סלקטור והמאפיינים שלו. קרה לי כבר שנתקלתי בקוד שהיה מבולגן והייתה כתיבה כפולה של סלקטור עם מאפיין של רקע, כשבאחד היה שימוש לא ברור ב-important!
header{
background-color: #aaa !important;
}
/*code... code... code...*/
header{
background-image:url(image.png) no-repeat 0 0;
}
הדוגמה הזאת היא אחת הסיבות לכך שאני לא מחבבת את הכתיבה המקוצרת ומעדיפה פריסה של המאפינים על פני כמה שורות. בדוגמה למעלה לא לקחו בחשבון שכאשר מגדירים את מאפייני הרקע בצורה המקוצרת ולא נותנים מאפיין ספציפי לצבע הרקע, הצבע בברירת מחדל הוא שקוף ודורס את ההגדרה לצבע רקע שניתן קודם לכן, מה שהצריך important מיותר.
אני מוצאת את זה הפריסה של המאפיינים נוחה במיוחד בשימוש של background כאשר מאוד ברור מה צבע הרקע ומה תמונת הרקע. במקום:
background: url("topbanner.png") #00D repeat-y fixed;
אני מעדיפה:
background-color: #00D;
background-image: url("topbanner.png");
background-repeat: no-repeat;
background-position: fixed;
אנחנו מרבים להשתמש ב sprite ובמקרה כזה אני מרכזת בחלק העליון של הקובץ את כל הסלקטורים שמשתמשים בקובץ ומגדירה לכולם את אותו background-image ואז אני משנה רק את המאפיין של background-position של כל אחד מהם בנפרד.
עוד דבר שאני אוהבת לעשות זה ל"יבש" את הקוד.
DRY = Don't Repeat Yourself , לעומת: WET = Write Everything Twice
מה שזה בעצם אומר זה לאחד מאפיינים שחוזרים על עצמם כדי: א. לנקות את הקוד מעודף שורות וב. להקל על התחזוקה של הקוד.
בסרטון הזה יש הסבר מקיף על אידיאולוגיה ומתודולוגיה בכתיבת קוד (מדקה 9:40 ועד 29:00 ), וגם הסבר על "ייבוש קוד". Brad Westfall מדבר על ארגון הקובץ סטייל עצמו וגם על שיטות לבחירת שמות לסלקטורים. גם שאר ההרצאה מעניינת וקשורה לכתיבת CSS וגם SASS. אמנם קצת ארוך – אבל מעניין.
לגבי סדר המאפיינים לכל סלקטור, הייתה לי התלבטות איך לארגן אותם. בגדול ישנם כמה שיטות. אחת מהן היא לפי סדר אלפבתי (וככה גם firebug מסדר אותם), אחרת היא לפי סדר מבני כשמאפיינים של מיקום (סוג מיקום, ימין שמאל אם יש, והיררכיה- z-index) באים ראשונים, אחריהם מאפיינים של תצוגה (גודל, ריווחים ועוד), ואז כל האחרים (צבעים, מאפייני רקע, וענייני טקסט). אפשר לקרוא פה עוד על idiomatic-css
קשה לי להגיד שאני עובדת לפי השיטה המבנית באופן מוחלט, אבל אני מנסה לפחות לאחד את המאפיינים שקשורים באותו נושא שיהיו אחד מתחת לשני. למשל:
color: #353535; font-family: Arial; font-size: 1em; line-height: 1;
קשה לי להגיד שהגעתי למצב של שליטה מעולה בדרך להשליט סדר בקובץ CSS. אני עדיין מרגישה שיש לי לא מעט ללמוד ולהתמקצע, אבל זה מה שכיף בעניין – כל פעם לסדר מחדש 🙂
ומסתבר שאני לא לבד בהתלבטויות שלי: כריס קויר פרסם תוצאות של סקר לגבי אופן הסדר של המאפיינים, מעניין לראות מה אנשים אחרים עושים!
עוד על סמנטיקה של CSS:
http://robodson.me/css-semantics/
7 שיטות לסידור קובץ CSS: