Dev-Time
SMACSS Guide with BEM Cover

SMACSS – המדריך ל-CSS יעיל ומודולרי (חלק א׳)

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

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

בקרוב אעלה את החלק השני של המאמר שיצלול לשיטה השנייה של SMACSS – חילוק ה-CSS לקטגוריות מוגדרות.

הקדמה

סביר להניח שלרובכם יצא להתנסות עם HTML ו-CSS בכדי ליצור ולעצב עמודי web. זהו הבסיס של הבסיס, ולמעשה אלה הן שניים מתוך שלושת שפות הליבה המתפעלות את הדפדפן. לעומת JavaScript, הצלע השלישית, HTML ו-CSS הן שפות אינטואיטיביות ולא מסובכות מידיי.

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

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

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

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

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

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

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

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

רשימת מכולת

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

איך חושבים בצורה מודולרית?
נתחיל לאתר אלמנטים בעלי מכנה משותף בעיצוב ובמבנה של האתר, ונוסיף אותם לרשימת המכולת שלנו. בשיטת עבודה זו, אנו יוצרים רשימת רכיבים/מודולים וכתוצאה מכך נוכל לכתוב HTML ו-CSS בצורה סמנטית ומודולרית.

אילו דברים בדיוק נוסיף לרשימת המכולת?
בכל עיצוב ישנם אלמנטים ראשים ומשניים. למשל, מרכיבי הליבה האחראים למבנה של הדף הכוללים אלמנטים כגון: header, navigation, main-content, sidebar, footer.
אלמנטים נוספים יכולים להיות פלטת צבעים שחוזרת על עצמה, כותרות, פונטים, מרחקים בין אלמנטים ועוד… למעשה, כל אלמנט שחוזר על עצמו יותר מפעם אחת יכול לקבל סטטוס של ״קומפוננטה״ ולהיווסף לרשימת המכולת.

לאיזו רזולוציה אתם מוכנים לרדת? זאת הבחירה שלכם בהתאם לפרויקט, וצורת החשיבה שלכם.

SMACSS

עד כה הצגתי הרבה תיאוריה על שיטת עבודה מודולרית בסביבת HTML ו-CSS, וכעט אתמקד ביישום פרקטי בעזרת SMACSS.

מה זה SMACSS? זה ראשי תיבות ל-Scalable Modular Architercture for CSS או בתרגום ישיר ארכיטקטורה מודולרית מורחבת ל-CSS. מושג זה הוצג לראשונה על ידי ג׳ונתן סנוקס בספר שכתב בשנת 2013. בספר זה הוא מסביר את שיטת העבודה שפיתח ויישם בזמן שעבד ב-Yahoo! ו-Shopify.

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

  1. הגדרת שמות עקבית על פי שיטתיות מסוימת.
  2. חילוק ה-CSS לקטגוריות שונות (ארחיב על כך בחלק ב׳ של המאמר).

הגדרת שמות עקבית

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

BEM

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

BEM מורכבת מתבנית קישור של Block, Element, Modifier. מערכת זו עושה שימוש בשמות של קלאסים בכדי להעביר מידע על בלוקים, אלמנטים, ומרכיבי הגדרה מסוימים.

בשביל להבין איך זה עובד, אפרט לכם על כל אחד משלושת המרכיבים:

בלוק (Block): מרכיב בסיס עצמאי, בדרך כלל זה נחשב להורה העליון בהיררכיית המרכיבים ב-HTML של המודל הנתון. לדוגמא, הבסיס של סרגל הניווט באתר:

אלמנט (Element):  אלמנטים שנכללים ותלויים במרכיבי הבסיס, ידועים גם כמרכיבי הבנים או child elements. כל element מצטייד בקידומת של __  כדוגמת סרגל הניווט באתר: nav__item

מרכיב הגדרה (Modifier):  אלמנט בעל שינויים ספציפיים במראה או בהתנהגות תוך כדי שמירה על תכונות המודל.  כל modifier מצטייד בקידומת של -- כדוגמת סרגל הניווט באתר: nav__item--selected

ישנם מצבים בהם מודולים מורכבים אך ורק מרכיבי בסיס (base) ומרכיבי הגדרה (modifier). אפשר גם לזהות שיש שימוש רק בקידומת של --, מה שמעיד שאין שימוש ברכיב האלמנט (element). לדוגמא: btn--primary, btn--error, btn--success, btn--warning.

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

דוגמא א – סרגל ניווט
סרגל הניווט מהווה דוגמא קלאסית בא נשתשמש ב-BEM.
Base: תגית ה-ul מציגה את רכיב הבסיס וראש המודל של הסרגל ניווט. לכן התגית מצטיידת בקלאס nav.
Element:תגיות ה-li יושבות בתוך ה-ul, לכן אצרף את הקלאס nav__item.
Modifier: בלחיצה על אחת מתגיות ה-li, האלמנט מקבל תכונות חדשות אך נשמר כחלק מהמודל של הסרגל ניווט. לכן הוספתי את הקלאס nav__item--selected בשביל לתת לאלמנט צבע שחור ולהוסיף קו תחתון.

See the Pen BEM Example – Navigation Bar (raw CSS) by Ron Gootman (@RonGootman) on CodePen.

דוגמא ב – כפתורים
במקרה זה, יש שימוש רק בבסיס ומרכיב הגדרה (אין את מרכיב האלמנט).
Base: כל כפתור הוא מודל עצמאי בפני עצמו, לכן אצייד כל אחד בקלאס של btn. בכדי לתת עיצוב בסיס לכל הכפתורים, אאתר את כל האלמנטים ב-HTML שמתחילים בקלאס btn בשיטה הבאה: ["class^="btn].
Modifier: בגלל שלכל כפתור יש מראה ואופי שונה, הוסיף לכל btn רכיב הגדרה מותאם כגון btn--success או button-error.

See the Pen BEM Example – Buttons (raw CSS) by Ron Gootman (@RonGootman) on CodePen.

דוגמא ג – תיבת הרשמה
Base: תגית ה-form משמשת כבסיס המודל של תיבת ההרשמה עם הקלאס form.
Element: ישנם שלושה סוגים של אלמנטים בתוך המודל של תיבת ההרשמה
form__label form__input from__btn
Modifier: בתיבת ההרשמה הספציפית הזו כל האלמנטים של ה-label מוסתרים, כך שנוסיף מרכיב הגדרה בקלאס form__label--hidden בהתאמה.

See the Pen BEM Example – Sign Up Form (raw CSS) by Ron Gootman (@RonGootman) on CodePen.

סיכום ביניים

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

החלק השני של SMACSS עוסק בחילוק קובץ ה-CSS ל-5 קטגוריות מוגדרות הכוללות: base, layout, modules, state, theme. הקסם האמיתי של ארכיטקטורת HTML ו-CSS מתוחכמת טמון בשילוב BEM עם החלוקת ה-CSS.

 את ליבת הנושא אני משאיר לחלק ב׳ של המאמר המכיל פירוט נרחב של כל אחת מהקטגוריות.

רון גוטמן

Add comment

Follow

Get every new post delivered to your Inbox

Join other followers