چرا BEM؟
با بزرگتر شدن پروژههای فرانتاند، مدیریت کدهای CSS به چالشی جدی تبدیل میشود؛ کلاسهای نامناسب به تداخل استایلها، سختی دیباگ و سرعت پایین تغییرات منجر میشود. BEM یک الگوی نامگذاری استاندارد است که با ساختار شفاف، نگهداری و توسعه را ساده میکند.
BEM چیست؟
BEM مخفف Block، Element، Modifier است و هر کلاس را بر اساس نقش و حالتش نامگذاری میکند.
اجزای اصلی
- Block (بلاک): یک بخش مستقل رابط کاربری که معنا و استایل مخصوص به خودش را دارد (
card،navbar). - Element (المنت): جزئی از بلاک که بدون آن معنا ندارد و با
__جدا میشود (card__title). - Modifier (مودیفایر): حالت یا نسخه متفاوت بلاک/المنت که با
--مشخص میشود (card--featured،card__button--active).
فرمت نامگذاری
block
block__element
block--modifier
block__element--modifier
مثال عملی
<div class="card card--featured">
<h2 class="card__title">عنوان کارت</h2>
<p class="card__description">توضیحات کوتاه</p>
<button class="card__button card__button--active">مشاهده</button>
</div>
.card {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 10px;
}
.card--featured {
border-color: #2563eb;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}
.card__title {
font-size: 1.1rem;
margin: 0;
}
.card__description {
margin: 0;
color: #4b5563;
}
.card__button {
justify-self: start;
padding: 10px 14px;
border-radius: 8px;
background: #111827;
color: #fff;
}
.card__button--active {
background: #2563eb;
}
مزایای استفاده از BEM
- خوانایی بالا و فهم سریع نقش هر کلاس
- جلوگیری از تداخل استایلها و وابستگی ناخواسته
- مقیاسپذیری بهتر در پروژههای بزرگ و تیمی
- دیباگ و ردیابی آسانتر رفتار اجزا
- امکان تکرارپذیری و ساخت الگوهای UI پایدار
معایب و محدودیتها
- طولانیتر شدن نام کلاسها
- ظاهر شلوغتر HTML در پروژههای کوچک
- نیاز به پایبندی تیمی؛ در غیر این صورت مزایا از بین میرود
چه زمانی از BEM استفاده کنیم؟
- پروژههای متوسط و بزرگ با اجزای مشترک زیاد
- تیمهای چندنفره یا کدبیسهایی که در آینده رشد میکنند
- معماری کامپوننتمحور (React، Vue، Angular یا Design System)
- زمانی که نگهداری و توسعه بلندمدت اهمیت دارد
نکات استفاده سریع
- نام بلاک را معنادار و مستقل انتخاب کنید، نه وابسته به مکان (
cardبهتر ازsidebar-card). - از تو در تویی عمیق در CSS پرهیز کنید؛ نامگذاری BEM نیاز به nesting زیاد ندارد.
- مودیفایرها باید فقط حالت را عوض کنند، نه ساختار کلی بلاک را.
جمعبندی
BEM با نامگذاری شفاف و پیشبینیپذیر، جلوی تداخل استایلها را میگیرد و نگهداری CSS را ساده میکند. اگر به کد تمیز و توسعهپذیر در پروژههای تیمی یا بلندمدت نیاز دارید، BEM یک الگوی مطمئن و امتحانشده است.