مقدمه: یکی از مهمترین وظیفه‌های ما بعنوان در بحث توسعه نرم‌افزارها، بحث، مهندسی و استفاده مجدد از سورس‌کدهاست که تا حد زیادی مانع هدر رفت ما، حالا چه مالی و چه انسانی، میشه. و خب از اصول اولیه نگهداری سورس‌کدها، که به ما قدرت بازخوانی و ویرایش مجدد اون‌ها رو میده، ست. یه مثال رایج‌تر و آسون‌تر ازین استایل کدنویسی، متد"" که غالبا باهاش آشنایی داریم. و حالا اصلا BEM چیه؟ که مخفف کلمات یک متدلوژی برای توسعه وب هست درواقع یه شیوه محبوب برای نام گذاری‌کلاس‌ها در html و css که اولین بار توسط تیم توسعه بکار برده شد. هدفش کمک به دولوپرها برای تقسیم کردن رابط کاربری به اجزای کوچکتر و قابل استفاده و افزایش خوانایی کد هست. با تکیه بر این متدلوژی میشه کلاس‌ها رو به تقسیم کرد: بلاک ( lock ) : ریشه و پایه کامپوننت عنصر ( lement ) : کامپوننتی که داخل بلاک قرار داره پیراینده ( odifier ) : تغییر یا گسترش بلاک - بد نیست یکم موضوع رو باز کنیم: فرض کنیم آدمک بالا یکی از و یا کامپوننت سایت شماست که میتونه هدر، فوتر، منو و. باشه که اینجا بهش کلاس stick - man . رو دادیم. برای اینکه استایل دهی ما راحت‌تر باشه میتونیم این بلوک رو به تقسیم کنیم. اینجا, و المان‌هایی هستند که داخل کامپوننت اصلی آدمک قرار میگیرند، در واقع این عناصر کوچکتر کلاس‌های هستند که کامپوننت اصلی نقش کلاس رو براشون داره. و ما این عناصر کوچکتر رو با در ادامه اسم بلوک اصلی میاریم که نام گذاریش به شکل زیر میشه. و حالا چی میشه اگه ما بخوایم دوتا آدمک آبی و قرمز داشته باشیم؟ اینجاست که ها یا همون پیراننده‌ها (؟ ! نقش خودشون رو ایفا میکنند. برای اضافه کردن پیراننده‌ها در ادامه اسم کامپوننت دوتا hyphens ( - - ) میاریم حالا یه مثال، اگه بخوایم دوتا آدمک با سایز کله متفاوت داشته باشیم چی؟ اینجا کله آدمک‌ها جزیی از هستند که دوتا استایل متفاوت دارند پس نام گذاریشون به شکل زیر میشه: برای مثالای واقعی‌تر و خوندن داکیومنت‌ها میتونید رو ببینید.