وأخيرًا وصلنا لأخر بوست في سلسلة CSS Notes، شرحنا أكتر من 19 ملحوظة مهمة في الـCSS هتساعدك بإذن الله تكتب كود كويس، وعشان يبقى ختامه مسك، خلينا نتكلم النهاردة عن الـNaming في الـCSS!
كتير جدًا بنواجه صعوبة واحنا بنحط أسماء للـClasses بتاعتنا، ونبدأ نحط أسماء عجيبة زي Div1 وEl7ob وليلة غريبة أوي سعادتك، ولما المشروع بيكبر بتقابل مشاكل في التعديل على الكود أو حتى فهم انت عامل ايه بالظبط.
وهنا بييجي دور واحد من أشهر الـDesign Patterns في عالم الـCSS، ألا وهو الـBEM، وده اختصار لكلمة Block Element Modifier، وهو ببساطة عبارة عن طريقة تقدر من خلالها تختار أسماء مناسبة للكود بتاعك بإعتبار ان الموقع بيتكون من عدد من الـBlocks
يعني على سبيل المثال، الموقع في الطبيعي بيتكون من Header، Main Section وFooter، فـ انا عاوزك دلوقتي تتعامل مع كل حاجة من دول انهم Block قائم بذاته منفصل عن أي حاجة تانية
وكل Block من دول ممكن يبقى جواه عدد من الـBlocks التانية، يعني على سبيل المثال الـHeader جواه الـNavigation Bar، اللوجو ومربع البحث، الـFooter جواه Block للروابط الهامة، Block تاني للتواصل وBlock تالت للإشتراك في النشرة البريدية وهكذا..
ممكن بقى جوة كل Block يكون موجود عدد من الـElements أو العناصر اللي بتقوم بمهام محددة، يعني مثلًا جوة الـSearch Box، انت عندك الـInput اللي بيتكتب فيه النص وزرار بيعمل عملية الـSearch نفسها، هنا هنتعامل مع كل واحد من دول على انهم Element
تخيلت معايا المشهد؟ جميل جدًا
دلوقتي احنا عاوزين نبدأ في التسمية، وليكن عندنا Figure زي اللي في الصورة هنا بيعبر عن Image وعليها Caption، الـFigure هي عبارة عن Block، والـImg والـCaption هنا عبارة عن Elements
فـ لما نيجي نسميهم وفقًا للـBEM، هنسمي الـFigure بأي حاجة مناسبة وتكون بتعبر عن المحتوى زي كلمة Photo مثلًا، وده الـBlock الأساسي عندنا
وكل Element هنبدأ نسميه بإسم الـBlock الأساسي وبعدين نضيفله اتنين Underscores واسم الـElement اللي برضه لازم يكون بيعبر عن المحتوى اللي بيعرضه الـElement ده
يعني مثلًا الـImage هنا هنسميها photo img، من حيث ان photo هي اسم الـMain Block والـimg هو الاسم اللي بيعبر عن الـElement نفسه، وبرضه الـCaption يتسمى بنفس الطريقة، photo caption وهكذا..
لحد هنا كلام جميل وزي الفل، اتكلمنا عن الـBlock والـElement، طب فين الـModifier يا عم الحاج؟ يا سيدي ماتقلقش ده أمره بسيط
دلوقتي في نفس المثال ده، خلينا نفترض ان الـFigure عندك ممكن ياخد Background باللون الرمادي أو الأبيض أو الأسود، وده يعتبر Modify أو تعديل على الشكل الأساسي للـBlock بحيث نخصص ليه صفة معينة
وهنا ببساطة هنكتب اسم الـBlock، بعديه شرطتين واسم الـModifier اللي بيعبر عن وظيفته، يبقى النتيجة في النهاية هتبقى photo–gray أو photo–black أو photo–white وهكذا..
وبس كدة، الـDesign Patterns بشكل عام بتساعدك تكتب كود مفهوم، أي مبرمج هشتغل على نفس المشروع هيكتب بنفس الطريقة وفي النهاية سرعة التعديل هتبقى أفضل بفرق ملحوظ
ده كان بوست دسم شوية حبيت أختم بيه السلسلة دي، وبإذن الله قريب هنبدأ نتكلم عن الـComputer Science واحدة واحدة ونغوص في تفاصيل هننبسط منها كلنا بإذن الله.
أشوفكم على خير البوست اللي جاي، وكالعادة ده الموضوع ببساطة
الجينيص
الجينيص