CSS و BEM
تشرح هذه المقالة CSS و BEM۔
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 & 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<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
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<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
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<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
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، أسماء الفئات (class) عالمية، مما يعرضها لخطر التصادم بين المكونات المختلفة۔
- الإفراط في استخدام محددات معقدة: تزيد محددات النسب أو محددات المعرفات (ID) المفرطة من الخصوصية، مما يجعل التعديلات المستقبلية صعبة۔
- انخفاض قابلية إعادة الاستخدام: تصبح الأنماط المحددة أصعب في إعادة استخدامها في مكونات أخرى۔
تم تصميم BEM لحل هذه المشكلات۔
المفاهيم الأساسية لـ BEM
يتألف BEM من ثلاثة عناصر رئيسية:۔
- كتلة (Block): مكون مستقل ذو معنى خاص به۔
- عنصر (Element): جزء من الكتلة، مرتبط بها منطقيًا۔
- المعدل (Modifier): يغير مظهر أو سلوك الكتلة أو العنصر۔
تتبع اصطلاحات التسمية في BEM التنسيق التالي:۔
.block__element--modifierالكتلة (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 (الكتلة - العنصر - المعدّل) لتعزيز إعادة الاستخدام وقابلية الصيانة۔
توسيع الأنماط
لنلقِ نظرة على كيفية إضافة معدل جديد لجعل عنصر معين في القائمة غير نشط۔
سيبدو 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.۔ يرجى التحقق من القناة على YouTube أيضًا.۔