‏SASS ו-BEM

מאמר זה מסביר את ‏SASS ו-BEM.

נסביר את המושגים ואת שיטות היישום למניעת הבלבול והשבריריות אשר נוטים להתרחש כאשר CSS גדל בהיקף, באמצעות ‏SASS ו-BEM, עם דוגמאות מוחשיות.

YouTube Video

‏SASS ו-BEM

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

הסיבה לכך היא ש-CSS היא בעצמה שפה שאינה כופה כללי עיצוב. אם ממשיכים לכתוב כפי שהוא, התלויות הבלתי מכוונות ימשיכו לגדול.

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

סיבות לכך ש-CSS הופך בקלות לבלתי ניתן לניהול

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

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

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

‏BEM היא שיטת מתן שמות שמטרתה 'לבטא תפקידים באמצעות שמות'

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

• בלוק הוא רכיב עצמאי.
• אלמנט הוא רכיב פנימי של הבלוק.
• מודיפייר מייצג מצב או גרסה.

1.card {}
2.card__title {}
3.card--highlighted {}

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

צורת HTML בסיסית המשתמשת ב-BEM

להלן דוגמה לממשק כרטיס (card) ב-HTML באמצעות BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

משמות המחלקות בלבד, אפשר להבין שזהו 'רכיב כרטיס', 'כותרת שבתוכו', ו'המצב המודגש'. זהו היתרון הגדול ביותר של ‏BEM.

עם זאת, ‏BEM בלבד עלול להביא ל-CSS מפורט ומסורבל.

אם כותבים ‏BEM כפי שהוא לקובץ CSS, כמות הקוד נוטה לגדול.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

כאן, באמצעות ‏SASS, אפשר לקבל קוד מסודר אשר שומר על המבנה.

הבעה טבעית של ‏BEM בעזרת קינדוס (nesting) של ‏SASS

באמצעות הכנסת קוד ב-SASS, ניתן לשקף את מבנה ‏BEM ישירות בקוד.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& מתייחס לסלקטור ההורה ועובד מצוין עם שמות BEM.

‏CSS שנוצר מ-SASS זה

‏SASS זה לעיל מקומפל ל-CSS כמו מה שמופיע בהמשך.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

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

עיצוב לשימוש בטוח במודיפיירים

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

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

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

הגבלת קינון של אלמנטים לרמה אחת

ב-BEM, חשוב לא לקנן אלמנטים לעומק רב.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

אלמנטים מרובי רמות כמו .card__header__title הם סימן שכדאי לשקול לפצל את הבלוק.

דוגמה למבנה קבצי ‏SASS

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

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

אם תנהלו כל רכיב כ-בלוק אחד = קובץ אחד, הסיכון להתפרקות/שבירה פוחת.

דוגמה ל-card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

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

סיכום

‏SASS ו-BEM אינם רק טכניקות אופנתיות—הן גישות מעשיות להפיכת CSS לקוד שניתן לעצב ולשלוט בו.

• ‏BEM מספק שמות עם משמעות ותפקיד.
• ‏SASS מאפשר כתיבה קלה תוך שמירה על המבנה.
• שילוב של שניהם הופך את CSS לפחות שביר.

בואו נכתוב את CSS היום בצורה שהאני העתידי שלכם יוכל להבין.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video