YouTube Video

HTML לתצוגה מקדימה

css-bem.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS ו-BEM: גישה לניהול אפקטיבי של סגנונות

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

אתגרים ב-CSS והצורך ב-BEM

האתגרים ב-CSS כוללים את הבעיות הבאות:.

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

BEM נועד לפתור בעיות אלו.

מושגי יסוד של BEM

BEM מורכב משלושה אלמנטים עיקריים:.

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

קונבנציית השמות של BEM פועלת לפי הפורמט הבא:.

.block__element--modifier

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

דוגמה מעשית

להלן דוגמה פשוטה.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>

button הוא בלוק.
button__text הוא אלמנט.
button--primary הוא מודיפייר.

יתרונות של BEM

היתרונות הבאים של BEM.

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

בניית פרויקט באמצעות BEM

עיצוב HTML

להלן דוגמה ל-HTML שמיישם את BEM.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

עיצוב CSS

כתבו את ה-CSS המתאים לקוד ה-HTML כפי שמתואר להלן.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}

CSS זה מגדיר סגנונות מודולריים באמצעות שיטת BEM (Block Element Modifier) כדי לשפר את הניתנות לשימוש חוזר והתחזוקיות.

הרחבת סגנונות

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

קוד ה-HTML המתאים ייראה כך.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>

1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}

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

שאלות נפוצות

בעת שימוש ב-BEM, ניתן לשים לב לנקודות הבאות.

שאלה 1: האם עליי להיצמד באופן מוחלט לכללי השמות של BEM?

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

שאלה 2: האם השימוש ב-BEM לא הופך את ה-CSS ליותר מפורט מדי?

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

שאלה 3: האם ניתן להשתמש ב-BEM לצד מסגרות CSS אחרות?

ניתן להשתמש ב-BEM יחד עם מסגרות CSS אחרות. לדוגמה, אפילו בשימוש ב-Tailwind CSS או Bootstrap, אפשר ליישם את BEM ברכיבים מותאמים אישית.

סיום

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

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

YouTube Video

מאפיין `aspect-ratio` ועיצוב רספונסיבי