روش نام‌گذاری BEM، چالش‌ها و فواید آن در توسعه و نگهداری کدهای Front-End

یکی از چالش های مهمی که برنامه نویسان در پروژه های بزرگ با آن مواجه هستند بحث توسعه و نگهداری کدهای مربوطه است. اما روش نام‌گذاری BEM چه تاثیری در این موضوع دارد؟

در طراحی سایت و بخصوص در کد های مرتبط با Front-End  نیز برنامه نویسان با این چالش مواجه هستند.

یکی از چالش های مربوط به توسعه کدهای Front-End بحث نام‌گذاری معنی دار و اصولی کلاس ها (class) است.

• ES ابزاری برای استانداردسازی جاوا اسکریپت

کلاس‌ها (class)

کلاس‌ها (class) در طراحی وب‌سایت ها از اهمیت بالایی برخوردارند زیرا کلاس ها نمود بسیاری در کدهای CSS, Sass, JavaScript, HTML دارند و بسیار مهم است که نامگذاری آنها به صورت اصولی انجام بشه تا کدها خوانایی و انعطاف مورد نیاز را داشته باشند.

روش‌های متعددی برای نامگذاری کلاس‌ها وجود دارد که یکی از کارآمدترین و جالب ترین آنها، که امروزه بخصوص در حوزه Front-End بسیار مورد استفاده است روش نام‌گذاری BEM است.

روش BEM چیست؟

روش BEM که مخفف Block Element Modifier روشی کامپوننت محور برای توسعه صفحات وب و کاهش حجم کدها است.

مطابق روش BEM هر رابط کاربری به کامپوننت‌های مستقلی تقسیم می‌شود که اساس کدهای ما را تشکیل می‌دهند.

به بیان دیگر این روش قصد دارد ب ما بگوید که کدهای خود را به قسمت‌های مستقلی تقسیم‌ بندی کنید تا کد ها قابلیت آن را داشته باشند که بصورت مستقل دربخش های مختلف پروژه مورد استفاده قرار گیرند.

بديهیست که با استفاده از این روش توسعه و تغییر کدهای پروژه هایی در مقیاس بزرگ آسان تر انجام می‌شود.

اما اگر هنوز مفهوم کامپوننت در روش نامگذاری BEM برای شما روشن نشده برای درک بهتر به تصویر زیر دقت کنید:

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

با توجه به این تعریف در تصویر بالا یک عنصر والد با کلاس (card) داریم که چند عنصر دیگر زیر مجموعه آن است (فرزندان) که بطور کلی به مجموع همه این عناصر در اصطلاح بلاک (block) می‌گویند.

هر بلاک مستقل از سایر المان ها و بلاک هاست که به تمام این مجموعه مستقل یک کامپوننت می‌گویند. بنابراین می‌توان به تعداد مورد نیاز در پروژه کامپوننت داشت مثلا یک کامپوننت برای منو یکی برای هدر ، فوتر و…..

کامپوننت ها در روش نام‌گذاری BEM تشکیل شده از عناصر Block ,Element ,Modifier است. برای درک بهتر نامگذاری کلاس‌ها در روش BEM به دستور زیر توجه کنید :

block__element–modifire

در ادامه به اختصار به توضیح هر یک می‌پردازیم :

بلاک (Block) در روش  BEM

Block ها به عناصروالد و مستقلی که قابلیت استفاده در پروژهای دیگر را دارند گفته می‌شود.‌ یکی دیگر از ویژگی های بلاک ها مشخص کردن هدف کامپوننت ها است مثلا مشخص می‌کند که این کامپوننت درباره هدر است یا فوتر  و….

نکته : باید توجه داشت که بلاک ها میتوانند اعضای تشکیل دهنده یک بخش مانند هدر یا فوتر باشند.

مفهوم Element  در  BEM :

ها به عناصر وابسته به والد یا همان block ها گفته می‌شود.

به بیانی دیگر element ها همان عناصری فرزندی هستند که درون عناصر والد (block) قرار می‌گیرند و طبعا این عناصر نمی‌توانند به صورت مستقل در سایر پروژه ها کاربرد داشته باشند.

در روش نامگذاری BEM نام عناصر element بعد از عنصر block قرار می‌گیرد

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

• قرار دادن عنوان صفحه در یک خط

مفهوم Modifier  درBEM:

modifier  ها درواقع کلاس هایی هستند که با اعمال آنها ویژگی های ظاهری یک المان تغییر می‌کند ولی در ماهیت اصلی آن آلمان تاثیری ندارد.

ویژگی های ظاهری مانند : رنگ ها ، فونت ، انداره ها و….. را تغییر می‌دهد.

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

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