للمصميمن فقط مقدمة إلى منهجية BEM

دعونا نواجه الأمر، ونحن جميعا نريد أن نجعل نظامنا أسهل للقراءة. فعل ذلك يساعدنا على العمل بشكل أسرع وأكثر كفاءة، وعندما يعمل الآخرون معنا يمكننا الحفاظ على وضوح ودلالات متماسكة. في هذه الأيام يبدو أن هناك الكثير من المعايير والشروط في العالم CSS: OOCSS، SMACSS، BEM وأكثر! هذه كلها نهج لتحسين هيكل CSS، واليوم نحن نذهب لتغطية BEM.
BEM تقف على كتلة العنصر معدل. فإنه يشير إلى وجود طريقة منظمة لتسمية الفصول الدراسية، بناء على خصائص العنصر في السؤال. إذا كنت قد رأيت من أي وقت مضى على اسم الفئة مثل header__form—email

هذا BEM في العمل. عند استخدام منهجية BEM، والحفاظ علما بأن سنكون باستخدام أسماء الطبقة الوحيدة (وليس معرفات). أسماء فئة تسمح لك لتكرار اسم BEM إذا لزم الأمر، وإنشاء بنية الترميز أكثر اتساقا (سواء على في ملفات HTML و CSS / ساس). الآن دعونا كسرها نزولا.
كتلة
هو كتلة الحاوية أو السياق حيث يجد العنصر نفسه. التفكير في هذا الأمر وقطع الهيكلية أكبر من التعليمات البرمجية. قد يكون لديك رأس الصفحة وذيلها، ومنطقة الشريط الجانبي المحتوى الرئيسي. كل واحدة منها من شأنه أن يعتبر كتلة. نلقي نظرة على الصورة أدناه:

العنصر يشكل كتلة جذر الطبقة وسوف تذهب دائما في المقام الأول. أعرف فقط أنه بمجرد كنت قد حددت كتلة الخاص بك، فإنك سوف تكون على استعداد لبدء تسمية العناصر الخاصة بك.
العنصر
العنصر هو قطعة من حجر. كتلة هو الكل والعناصر هي قطعة. هو مكتوب كل عنصر بعد كتلة متصلة بواسطة اثنين سفلية.

1 .block__element

أعرف أن هذا يبدو غريبا بعض الشيء ولكن بمجرد البدء في استخدامها فسوف أتساءل كيف كنت من أي وقت مضى كتب CSS دون ذلك! تسطير مزدوج يسمح لك بسرعة وبصريا على التنقل والتعامل مع التعليمات البرمجية الخاصة بك.

وهنا بعض الأمثلة على كيفية عمل منهجية العنصر :

1.header__logo {}

2.header__tagline {}

3.header__searchbar {}

4.header__navigation {}

كما ترون، هناك مجالا للإبداع، وجعل هذه المنهجية بنفسك. "الملاحة" يمكن تغييره إلى "الملاحة"، "الشعار" يمكن تغييره إلى "علامة" أو "الشعار". وهذه النقطة هي للحفاظ على الأسماء بسيطة، واضحة، ودقيقة. لا أكثر أعتقد أنه، وبسبب الأنماط الخاصة بك وHTML ستبقى الجافة (لا تكرر نفسك). لا ينبغي أن يكون مشكلة لتحديث أسماء فئة عندما تجد الدلالي الذي يعمل على نحو أفضل بالنسبة لك (مجرد محاولة للتمسك به!). سوف تجعل العناصر الأساسية من أسماء صفك، مما يساعدك في فهم كيفية تنظيم الأنماط الخاصة بك وكيفية إدارة التخطيط الخاص بك.
معدلات

الآن فإنه يحصل على متعة (إذا كنت لا يلهون بالفعل!) عند تسمية فئة، والقصد من ذلك هو للمساعدة في جعل هذا العنصر تكرار ذلك لم يكن لديك لكتابة فصول جديدة في مناطق أخرى من الموقع إذا أنماط العناصر هي نفسها. عندما تحتاج إلى تعديل نمط عنصر معين، يمكنك استخدام معدل للقيام بذلك، يمكنك إضافة واصلة مزدوجة (طبعا!) - بعد العنصر (أو كتلة). هنا هو مثال قصيرة

1.block--modifier {}

2.block__element--modifier {}

كن حذرا مع هؤلاء! تذكر أنك تريد أن تبقي كل شيء بسيط وليس لديك لتكرار نفسك أو إنشاء فصول اضافية الا للضرورة القصوى. دعونا نتحدث عن ذلك مع التعليمات البرمجية باستخدام رأس من الموقع وكتلة لدينا:

1.header__navigation {}

2.header__navigation--secondary {}

إذا كنت تستخدم التصفح الثانوي، وهناك احتمالات أن تخطيط والتباعد هو نفسه، ولكن التصفح الثانوي هو لون مختلف. يمكنك إما تكرار الأنماط الأصلية، أو حتى أفضل، واستخدام المعالج. مع ساس، وكنتextend العنصر الرئيسي (بحيث العنصر الثانوي يرث كافة الخصائص) وتغيير الأنماط المناسبة .

01.header__navigation {

02 background: #008cba;

03 padding: 1rem 0;

04  margin: 2rem 0;

05 text-transform: uppercase;

}

06 .header__navigation--secondary {

07 @extend .header__navigation;

08  background: #dfe0e0;

}

كنت قد يكون التفكير لنفسك "ولكن اسم الطبقة طويل جدا!" إن الطريقة التي أرى أنها: أسماء فئة BEM محددة، واضحة وسهلة القراءة داخل أتش تي أم أل، والتواصل بوضوح ما كنت ل.

ما أحب أيضا عن أسماء فئة BEM هو أن لديك فقط لاستخدام اسم فئة واحدة لكل علامة HTML. نلقي نظرة على الكيفية التي يمكن أن تعمل للتسميات. محددات القياسية :

1.label .label-default {}

2.label .label-alert {}

مقابل محددات  BEM:

1.label {}

2.label--alert {}

لغات مثل ساس (SCSS على وجه التحديد) تسمح لنا بسرعة العناصر تشترك في نفس ستلينغس مع استثناءات صغيرة. على سبيل المثال يمنع أدناه لنا تكرار الأنماط، بدلا نغير فقط ما هو مطلوب. ما أحب كثيرا عن منهجية BEM هو أنني لم يكن لديك من الجمع بين الطبقات الغامضة مثل

“panel panel-default col-md-3”.

إذا كنت تستخدم إطارا مثل مؤسسة يمكنك أن تبدأ في الاستفادة mixins. ولكن بالنسبة لمثال بسيط، دعونا أسلوب تلك ابليس حددنا فقط.

1.label {

background: #eee;

border-radius: 505;

color: #333;

font-size: 1rem;

}

2.label--alert {

@extend .label;

background: #da4531;

color: #fff;

}

استنتاج

كذلك فإنه يوجد لديك، BEM باختصار. كما ترون، هناك أكثر من ذلك بكثير لاستكشاف. BEM هو نظام دائم التطور التي تسمح لك لتحقيق الوضوح في التعليمات البرمجية الخاصة بك ومساعدتك على تحديد أفضل ووضع التسلسل الهرمي لتطوير الواجهة الأمامية.

من تجربتي الشخصية، وقد ساعد ذلك لي بشكل كبير في بناء نماذج أكثر كفاءة، والتحول إلى رمز مستوى الانتاج حتى أسرع!

إلتحق بنا على أضخم مجتمع تقني في العالم العربي على الفيسبوك انقر لايك

من فضلك شارك هذا الموضوع اذا اعجبك

بقلم رضوان الادريسي

رضوان الادريسي : مدون مغربي مهوس بالتدوين و جديد التكنولوجيا . أنشأت هذه المدونة لمشاركة كل زوارها بكل ما هو جديد بواسطة خبرتي المتواضعة في هذا المجال .

ضع تعليقا أخي الكريم