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

مقدمه:

یکی از مهمترین وظیفه‌های ما بعنوان مهندس نرم افزار در بحث توسعه نرم‌افزارها، بحث نگهداری، مهندسی و استفاده مجدد از سورس‌کدهاست که تا حد زیادی مانع هدر رفت منابع ما، حالا چه مالی و چه انسانی، میشه. و خب از اصول اولیه نگهداری سورس‌کدها، که به ما قدرت بازخوانی و ویرایش مجدد اون‌ها رو میده، استایل کد نویسی ست. یه مثال رایج‌تر و آسون‌تر ازین استایل کدنویسی، متد "Camel case" که غالبا باهاش آشنایی داریم.

و حالا اصلا BEM چیه؟

که مخفف کلمات Block Element Modifiers یک متدلوژی برای توسعه وب هست؛درواقع یه شیوه محبوب برای نام گذاری‌ کلاس‌ها در html و css که اولین بار توسط تیم توسعه Yandex بکار برده شد. هدفش کمک به دولوپرها برای تقسیم کردن رابط کاربری به اجزای کوچکتر و قابل استفاده و افزایش خوانایی کد هست. با تکیه بر این متدلوژی میشه کلاس‌ها رو به ۳ گروه کلی تقسیم کرد:

• بلاک(‌Block): ریشه و پایه کامپوننت
• عنصر(Element): کامپوننتی که داخل بلاک قرار داره
• پیراینده(Modifier): تغییر یا گسترش بلاک
  

-بد نیست یکم موضوع رو باز کنیم: فرض کنیم آدمک بالا یکی از بلوک‌ها(‌Block) و یا کامپوننت سایت شماست که میتونه هدر، فوتر، منو و... باشه که اینجا بهش کلاس stick-man. رو دادیم.

.stick-man {    }

برای اینکه استایل دهی ما راحت‌تر باشه میتونیم این بلوک رو به عناصر کوچکتر(Element) تقسیم کنیم. اینجا head , feet و arms المان‌هایی هستند که داخل کامپوننت اصلی آدمک قرار میگیرند، در واقع این عناصر کوچکتر کلاس‌های child هستند که کامپوننت اصلی نقش کلاس والد یا parent رو براشون داره.

و ما این عناصر کوچکتر رو با دوتا underscores (__) در ادامه اسم بلوک اصلی میاریم که نام گذاریش به شکل زیر میشه.

.stick-man__head {    }
.stick-man__arms {    }
.stick-man__feet {    }

و حالا چی میشه اگه ما بخوایم دوتا آدمک آبی و قرمز داشته باشیم؟? اینجاست که modificationها یا همون پیراننده‌ها(؟!) نقش خودشون رو ایفا میکنند.

برای اضافه کردن پیراننده‌ها در ادامه اسم کامپوننت دوتا hyphens(--) میاریم

.stick-man--blue {    }

.stick-man--red {    }

حالا یه مثال ترکیبی، اگه بخوایم دوتا آدمک با سایز کله متفاوت داشته باشیم چی؟

اینجا کله آدمک‌ها جزیی از Element هستند که دوتا استایل متفاوت دارند پس نام گذاریشون به شکل زیر میشه:

.stick-man__head--small {    }

.stick-man__head--big {    }

برای مثالای واقعی‌تر و خوندن داکیومنت‌ها میتونید وبسایت‌شون رو ببینید.

+منابع تصاویر