قواعد BEM چیست؟ و چرا باید از آن استفاده کرد؟

در مسیر یادگیری برنامه‌نویس فرانت‌اند (Front-end) یا طراحی وب‌سایت CSS یکی از ستون‌های اصلیه که یادگیری اون خیلی آسونه اما تغییر و توسعه اون مخصوصا توی پروژه‌های بزرگ به این آسونی نیست. این همون دلیلیه که روش‌هایی مثل OOCSS, SMACSS و BEM توسعه داده شدن و در حال حاظر BEM یکی از پراستفاده‌ترین روش‌ها برای توسعه و نام‌گذاری در CSS و بطور کلی‌تر استایل‌دهیه.

بدون توضیح اضافه‌تر شروع کنیم به یادگیری و آشنایی با BEM:

بم یک سیستم نام‌گذاری استایل‌هاست که توسط یاندکس (گوگل روسیه) ساخته شده و سعی داره که مشکل نام‌گذاری و ساختار CSS رو حل کنه ( یا حداقل بهترش کنه) و کلاس‌های ساختارمندتر و بهینه‌تر برای توسعه و scale کردن رو فراهم کنه.

قواعد اولیه

بم (‌BEM) از اول کلمات Block و Element و Modifiers تشکیل شده که در واقع به ۳ رکن اصلی این روش اشاره داره.

بزارین مثالی بزنم، میخواهیم میخوایم یک کامپوننت card بسازم. پس بلوک ما کارد ما خواهد بود و هر قسمت دیگه‌ای که داخل بلوک ما باشه بهش المنت میگیم. مثلا در مثال ما المنت‌های عکس و کپشن و دکمه رو داریم. در BEM ما المنت‌هارو با ۲تا underscore به هم وسط میکنیم. مثلا card__image که المنت image در داخل بلوک card رو معرفی می‌کنه. گاهی اوقات هم دو مدل دکمه داریم که همه دکمه هستن اما تغییرات کوچیکی مثل فونت یا رنگ دارن که این تغییرات رو با modifiers ها مشخص می‌کنیم و برای وصل کردن مادیفایرها از دوتا dash استفاده میکنیم. برای مثال card__button—success

پس کلاس‌های CSS ما برای پیاده‌سازی این کارد به این صورت خواهد بود:

// CSS
.card {}
.card__image {}
.card__description {}
.card__button--success{}
.card__button--back {}

و اگر از PreProcessorهایی مثل SASS استفاده میکنین که به صورت میتونین بنویسین:

// SCSS
.card {
        &__image {}
        &__description {}
        &__button {
                &--success{}
                &--back{}
         }
}

معایب و مزایا

بم به شما این مزیت رو میده که ساختار ماژولاری برای پروژه خودتون داشته باشین و به خاطر ساختار مخصوص نام‌گذاری به مشکلی در نام‌گذاری و بعدا در توسعه و بزرگ‌تر شده پروژه برنمیخورین.

اما احتمالا این فکر به ذهنتون میخوره با استفاده از BEM اسم کلاس‌هاتون خیلی طولانی میشه هرچند که با استفاده از تکنولوژی‌هایی مثل SASS و نام‌گذاری در هم اونقدرها هم بد نیست (همونطور که بالاتر مثالش رو میبینین).

بم به صورت گسترده‌ای در بین پروژه‌های بزرگ استفاده میشه و حتی گاهی یکی از اصول اصلی شمرده میشه و من به شدت بهتون توصیه میکنم که از BEM در پروژه‌هاتون استفاده کنین (یا حداقل امتحان)!

مثال و مطالعه بیشتر

• Get BEM
• CSS Tricks BEM 101

من محمدرضا، توسعه‌دهنده فرانت‌اند هستم و خوشحال میشم زیر این پست و همینطور در توییتر در مورد BEM و حتی چیزای دیگه گپ بزنیم. این مقالمه ترجمه شده از اینجا است.