متد BEM که مخفف سرواژگان Element ،Block و Modifier می‌باشد، روشی کامپوننت محور است در زمینه‌ی توسعه‌ی وب.
ایده‌ی اصلی این متد، تقسیم رابط کاربری (User Interface) به بلاک‌های مستقل است. این شیوه، عملیات توسعه را آسان و سریع کرده و همچنین امکان استفاده‌ی مجدد کدها را فراهم می‌کند.
بلاک: جزء (component) مستقلی از صفحه که قابلیت استفاده مجدد را داراست.
در سند HTML، بلاک‌ها در ویژگی class نمایش داده می‌شوند.
نام بلاک (Block) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا menu. نه این که وضعیت ظاهری و شکل آن را بیان کند، مثلا نباید چیزی شبیه red یا big باشد.
در مثال بالا حالت اول صحیح است چرا که از لحاظ معنایی، error وضعیت و حالت را بیان می‌کند در حالی که red-text بیان‌کننده ظاهر و استایل است.
یک Block نباید محیط اطرافش را تحت تأثیر قرار دهد. یعنی نباید margin یا position به خصوصی داشته باشد.
همچنین وقتی که از روش BEM استفاده می‌کنید، نباید از تگ‌ها و ID عناصر در CSS استفاده کنید، بلکه فقط استفاده از کلاس مجاز است.
این موارد، استقلال مورد نیاز Block را برای استفاده‌ی مجدد یا جابجایی آن به هر قسمتی از پروژه، تضمین می‌کند.
بلاک‌ها را می‌توان داخل یکدیگر استفاده کرد. همچنین عمق این تورفتگی‌ها به هر تعدادی می‌تواند باشد.
برای مثال بلاک head می‌تواند شامل فهرست (menu)، لوگو (logo)، فرم جستجو (search) و بخش ورود (auth) باشد.
در مثال بالا دو بلاک search-form و logo، داخل بلاک header قرار گرفته‌اند.
بلاک‌ها به علت ماهیت مستقلشان می‌توانند بدون نیاز به تغییر در کدهای CSS یا جاوااسکریپتی که دارند، به هر نقطه‌ای از صفحه جابجا شوند.
برای مثال بلاک logo به راحتی می‌تواند با بلاک auth جابجا شود، بدون نیاز به تغییر در کدهای CSS یا جاوااسکرپیت.
۳) استفاده‌ی مجدد (Re-use)
بلاک‌ها می‌توانند به هر تعداد مورد استفاده‌ی مجدد قرار بگیرند. در واقع ممکن است در یک طرح چند نمونه از یک بلاک استفاده شود.
عنصر: قسمتی از یک بلاک (block) که به صورت مجزا قابل استفاده نیست.
برای مثال آیتم‌های یک منو خارج از فضای اصلی آن استفاده نمی‌شوند بنابراین هر آیتم یک عنصر است.
نام عنصر (Element) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا item یا text. نه این که بیانگر شکل ظاهری آن باشد، مثلا نباید چیزی شبیه red یا big باشد.
ساختار نام کامل یک عنصر به صورت block-name__element-name است.
نام عنصر توسط دو تا underscore ( __ ) از نام بلاک جدا می‌شود.
پیراینده: ماهیتی است که ظاهر، حالت و رفتار یک بلاک یا عنصر را مشخص می‌کند.
برای مثال ظاهر یک بلاک فهرست (menu) می‌تواند توسط یک پیراینده تغییر کند.
در متدولوژی BEM، قواعد کلی نامگذاری مطرح می‌شود و انتخاب روش نامگذاری کاملا به نیازمندی‌های شما و پروژه بستگی دارد. در واقع روشی بهتر است که بهتر پاسخگوی نیازهای شما باشد.
وقتی از BEM استفاده کنید تمام انتخابگرهای CSS به اصطلاح flat خواهند بود. به این معنی که انتخابگرهای نسلی مثل انتخابگر زیر که بار محاساباتی سنگین‌تری دارند، وجود نخواهند داشت. در نتیجه سرعت بارگذاری صفحه به مراتب بالاتر خواهد رفت.
تمام اطلاعات مورد نیاز با بررسی کد HTML به دست خواهد آمد. به سرعت پیراینده‌ها و عناصر متعلق به یک بلاک معلوم می‌شوند. می‌توان فورا به کدهای CSS مربوطه دست پیدا کرد، بدون نیاز به چک کردن وابستگی‌های پشت سر هم.
از آنجایی که هر بلاک کاملا مستقل است، می‌توان بدون هیچ گونه نگرانی آن را به هر نقطه‌ای از صفحه انتقال داد یا کپی کرد. همچنین چون در BEM فقط از کلاس استفاده می‌شود هر زمان که نیاز شد می‌توان تگ‌ها را تغییر داد.
علاوه‌ی بر این‌ها، BEM به راحتی قابل فهم و یادگیری آن بسیار آسان است.
مهم‌ترین ایرادی که در BEM به وجود می‌آید طولانی و زشت شدن نام کلاس‌هاست که خب برای آنها که زیبایی کد را به قابلیت نگه‌داری آن ترجیح می‌دهند مهم است !
علاوه بر BEM، متدهای دیگری نیز در زمینه CSS وجود دارند مثل OOCSS، SMACSS، SUITCSS و Atomic که اگر علاقه‌مند هستید می‌توانید درباره‌ی آنها بیشتر بخوانید.
شاید در پروژه‌های کوچک، سازماندهی استایل‌ها خیلی مسئله‌ی حائز اهمیتی نباشد اما وقتی که پروژه کمی بزرگ و پیچیده می‌شود، سازماندهی کدها و نحوه‌ی آن به طور کلی در سه چیز خیلی موثر خواهد بود؛ یک در مدت زمانی که صرف نوشتن کد و Refactoring می‌شود، دو میزان حجم کدی که باید نوشته شود و سه زمانی که باید مرورگر صرف بارگذاری کدها کند. اینجاست که وجود روش نام گذاری BEM به شدت احساس می‌شود. البته انتخاب با شماست که در بین متدهای موجود کدامیک را به کار بگیرید یا اینکه حتی متد خودتان را بنویسید.
