نام گذاری کلاس ها در CSS با متودولوژی BEM

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

در انتها تصمیم گرفتم یه توضیح مختصر و شسته رفته از BEM، اینجا بگذارم.

چیزی که خیلی‌ها رو توی پروژه‌های بزرگ اذیت می‌کنه، سردرگم شدن لایِ انبوهی از کلاس‌های بی‌نام‌ونشان مثل text-1 یا inner-box هست که بعد از دو هفته، خودِ نویسنده هم یادش نمی‌ره چی به چیه!

خلاصه به فکر افتادم که چکیده‌ی این مفهوم رو با زبون ساده بنویسم تا هم مشکل دانشجوها حل بشه و هم اگه شما توی پروژه‌هاتون با غولِ نام‌گذاری دست‌وپنج نرم می‌کنید، یه راه نجات داشته باشید.

البته احتمالا الان خیلی‌ها می‌گن: «بابا کی حال داره این‌همه اسم طولانی بنویسه؟» حرفتون قبول، ولی از قدیم گفتن: جنگِ اول به از صلحِ آخر؛ الان کمی بیشتر تایپ می‌کنید ولی موقع دیباگ کردن، دعا به جونِ BEM می‌کنید.

BEM اصلاً چی هست؟

این کلمه مخفف Block - Element - Modifier هست. هدفش هم خیلی ساده‌ست: ایجاد یک رابطه‌ی منطقی بین HTML و CSS.

۱. بلوک (Block)

بلوک همون موجودیت مستقل ماست. مثلاً یک «منو» یا یک «دکمه».

CSS

/* مثال */
.menu { ... }
.btn { ... }
.nav { ... }

۲. المان (Element)

المان بخشی از اون بلوک هست که به تنهایی معنای خاصی نداره و وابسته به بلوک مادرشه. برای جدا کردنش از اسم بلوک، از دو تا آندرلاین (__) استفاده می‌کنیم. مثلاً اگر توی دکمه‌مون یک آیکون داریم:

CSS

.btn__icon { ... }
.nav__item { ... }

یه راه ساده برای اینکه گیج نشید اینه: اگر اون بخش رو از توی بلوک بردارید و بیرون بذارید و دیگه معنا یا عملکردش مثل قبل نباشه، اون قطعاً یه المان هست.

۳. اصلاح‌کننده (Modifier)

حالا فرض کنید همون دکمه رو می‌خواید توی یه جای دیگه قرمز یا بزرگ‌تر نمایش بدید. به جای اینکه یه کلاس جدید بسازید، از مودیفایر استفاده می‌کنید. نشانه‌اش هم دو تا خط تیره (--) هست.

CSS

.btn--red { ... }
.btn--large { ... }

یا حتی ممکنه یک المان داخل بلوک به دو حالت مختلف نمایش داده بشه :

CSS

.card__icon--small { ... }
.card__icon--large { ... }

اجازه بدید یه مثال کامل بزنم:

فرض کنید یه کارت برای معرفی محصول داریم. ساختار استاندارد BEM به این شکل می‌شه:

HTML

<div class="card">
  <img class="card__image" src="..." />
  <h2 class="card__title">نام محصول</h2>
  <button class="card__button card__button--success">خرید</button>
</div>

دقت کنید که توی دکمه، من هم کلاس اصلی بلوک رو آوردم و هم مودیفایر رو. این کار باعث می‌شه استایل‌های پایه حفظ بشن و فقط تغییرات (مثلاً رنگ سبز) اعمال بشه.

در انتهای کار، شاید اولش براتون سخت باشه که عادت کنید به جای title بنویسید card__title؛ ولی وقتی پروژه‌تون بزرگ شد و خواستید یه تغییر کوچیک بدید و کل سایت نریخت پایین، متوجه ارزشش می‌شید.

امیدوارم این چند پاراگراف براتون کاربردی بوده باشه و توی پروژه‌های بعدی ازش استفاده کنید.