كتابة كود نظيف من أهم الأمور التي يجب على كل مبرمج أخذها بعين الاعتبار، كما أن اتباعك لقواعد وأسس معينة عند كتابة الكود تُضيف الكثير من التنظيم والترتيب له، وتعطي انطباع احترافي عنك.
في هذا الثريد بنتكلم عن احدى الطرق و المنهجيات المتبعة لكتابة اكواد CSS بشكل احترافي ومنظّم .✨
في هذا الثريد بنتكلم عن احدى الطرق و المنهجيات المتبعة لكتابة اكواد CSS بشكل احترافي ومنظّم .✨
اولاً خلونا نتعرف بشكل سريع عن BEM Methodology.
هي اختصار لـ Block Element Modifier، وتعتبر احد انواع المنهجيات المستخدمة لكتابة اكواد الـ CSS ، (مما يعني وجود انواع اخرى غيرها )
جميعها هدفها واحد وهو:
"تساعدك تكتب اكواد CSS منظمة ومرتبة."✅
هي اختصار لـ Block Element Modifier، وتعتبر احد انواع المنهجيات المستخدمة لكتابة اكواد الـ CSS ، (مما يعني وجود انواع اخرى غيرها )
جميعها هدفها واحد وهو:
"تساعدك تكتب اكواد CSS منظمة ومرتبة."✅
من مميزات الـ BEM Methodology :
1- تجعل الكود منظّم ومرتب أكثر.✅
2- تجعل الكود قابل للتعديل بشكل سهل (Maintainable).✅
3- تقلل من استخدام الـ Nesting classes. ✅
(على سبيل المثال لن تحتاج لعمل header h1 span)
1- تجعل الكود منظّم ومرتب أكثر.✅
2- تجعل الكود قابل للتعديل بشكل سهل (Maintainable).✅
3- تقلل من استخدام الـ Nesting classes. ✅
(على سبيل المثال لن تحتاج لعمل header h1 span)
متى استخدم هذه المنهجية؟
يتم استخدامها غالباً في المشاريع الي تحتوي على صفحات كثيرة ويواجه فيها المبرمج صعوبة كبيرة في تنسيق العناصر التي قد تؤدي الى حدوث مشاكل في الوراثة.
اما اذا كان المشروع لايحتوي على العديد من الصفحات وتنسيق العناصر لايؤدي لظهور مشاكل فاستخدامها غير مطلوب.
يتم استخدامها غالباً في المشاريع الي تحتوي على صفحات كثيرة ويواجه فيها المبرمج صعوبة كبيرة في تنسيق العناصر التي قد تؤدي الى حدوث مشاكل في الوراثة.
اما اذا كان المشروع لايحتوي على العديد من الصفحات وتنسيق العناصر لايؤدي لظهور مشاكل فاستخدامها غير مطلوب.
الطريقة هذه مثل ما ذكرنا تركز على ثلاثة اشياء:
1- الكتلة (Block) ⬛️
ويُقصد به اي كلاس له اسم يُفهم معناه ومستقل وخاص فيه.
مثال:👇🏻✨
كلاس باسم container افهم من خلاله انه يحمل عدة عناصر وهو بمثابة حاوية لها.
1- الكتلة (Block) ⬛️
ويُقصد به اي كلاس له اسم يُفهم معناه ومستقل وخاص فيه.
مثال:👇🏻✨
كلاس باسم container افهم من خلاله انه يحمل عدة عناصر وهو بمثابة حاوية لها.
2- العنصر (Element) 🟩
ويعتبر جزء من البلوك، وماله معنى خاص فيه (يكتمل معناه بداخل البلوك).
مثال:👇🏻✨
العنصر الخاص بالعنوان title بداخل عنصر container.
ويعتبر جزء من البلوك، وماله معنى خاص فيه (يكتمل معناه بداخل البلوك).
مثال:👇🏻✨
العنصر الخاص بالعنوان title بداخل عنصر container.
3- المُعدِّل (Modifier)
ويستخدم لتعديل وتغيير المظهر او السلوك الخاص بالعناصر داخل الصفحة.
مثال :👇🏻✨
اضافة hover للعناصر.
ويستخدم لتعديل وتغيير المظهر او السلوك الخاص بالعناصر داخل الصفحة.
مثال :👇🏻✨
اضافة hover للعناصر.
الصورة التالية تشرح النقاط السابقة بشكل مُختصر👇🏻✨
والحين بعد ماتعلمنا طريقة الـ BEM، بنطبق عليها كود CSS بسيط لعمل بطاقة معلومات حتى تترسخ الفكرة اكثر ..
رابط الكود👇🏻🔗
codepen.io
رابط الكود👇🏻🔗
codepen.io
نهاية الثريد..✨
اتمنى انكم استفدتوا، للإطلاع على الموضوع اكثر..👇🏻
#introduction" target="_blank" rel="noopener" onclick="event.stopPropagation()">en.bem.info
اتمنى انكم استفدتوا، للإطلاع على الموضوع اكثر..👇🏻
#introduction" target="_blank" rel="noopener" onclick="event.stopPropagation()">en.bem.info
جاري تحميل الاقتراحات...