همه چیز درباره استاندارد BEM در توسعه CSS

بدترین مشکلی که هر برنامه نویسی داره و باهاش دست و پنجه نرم میکنه (از برنامه نویس جاوا گرفته تا برنامه نویس فرانت اند ) مشکل نام گزاری متغیر ها ، کلاس ها ، توابع و ... هست.برای رفع این مشکل توی زمینه های مختلف قوانین و قوائد خاصی منتشر شده ، برای مثال توی زبان های برنامه نویسی و زبان های اسکریپت نویسی یک مرجع خیلی مهم وجود داره به نام کتاب Clean code که شمارو کمک میکنه تا کد های خیلی بهتر ، تمیز تر ، بهینه تر و حرفه ای تری تولید کنید ، این مشکل توی css هر به کرات دیده میشه تازه میشه گفت خیلی بیشتر !به خاطر اینکه ما توی css همش با اسم ها سر و کار داریم و اگر بخواهیم به تگ خاصی در HTML استایل بدیم باید از id یا class یا tagName استفاده کنیم پس این مشکل خیلی بیشتر حس میشه و کسانی که با CSS کار میکنن مخصوصا توی پروژه های بزرگ شدیدا با کمبود اسم مواجه میشن و گاهی اوقات میان از اسم هایی که هیچ ربطه به هم ندارن استفاده میکنن که باعث میشه همه چیز فقط بدتر و بدتر بشه ، بعد شما گاهی ممکنه تو این شلوغی ها بخواید یه چیزی رو عوض کنید اون وقت همه چیز به هم میریزه .حالا BEM اومده روشی رو به ما ارائه کرده که از این مخمصه بیرون بیایم و دیگه مشکل نام گزاری رو نداشته باشیم .اصلا BEM چیست ؟به زبان ساده BEM یک استاندارد نام گزاری کلاس ها در CSS است .این عبارت مخفف واژه های Block , Element , Modifier است و درک و نحوه استفاده از اون خیلی ساده و اسونه .به طور کلی استاندارد BEM میگوید که شما هر بخش از سایتتون رو باید یک block در نظر بگیرید مثل شکل زیر :همونطور که در شکل بالا میبینید ما یک block را داریم که شامل یک img ، نوشته و دو تا دکمه هست ، فرض کنید که تمام این بخش ها در یک تگ پدر با کلاس card وجود دارد که اون تگ پدر در واقع همان block ما هست ، حالا با استفاده از BEM به نام گزاری زیر مجموعه های این تگ پدر می پردازیم .حالت کلی استاندارد نام گزاری BEM به این صورت است : BlockName__ElementName--Modifierحال ما نام block را مشخص کردیم که card نام دارد و برای نام گزاری المان های داخلی به این روش پیش میرویم:المان والد ، هر فرزندی به هر تعداد داشته باشد برای نام گزاری فرزند ها ابتدا نام کلاس تگ پدر را مینویسیم و با دو علامت under line (__) آن را از نام کلاس پدر جدا میکنیم برای مثال :.card__image.card__title.card__descriptionحال ما نام element هم مشخص کردیم ، بریم سراغ مرحله آخر یعنی Modifier .اصلاح کننده ها یا Modifier ها چی هستن ؟ در تصویر بالا ما دو تا دکمه داریم که هر کدوم درست شبیه به هم هستن و تنها تفاوت اونها رنگ پس زمینه هست ، به کلاس هایی که فقط مقدار کوچیکی رو مثل رنگ پس زمینه ، رنگ متون یا سایز اونها رو تغییر میدن Modifier میگوییم و برای اینکه بخواهیم در کلاس هامون Modifier هارو جا بدیم ، اسمشون رو با دوتا dash (--) از ما بقی کلاس جدا میکنیم .برای مثال ما برای تغییر رنگ پس زمینه دو دکمه بالا از کلاس های زیر استفاده میکنیم :.card__button--successاین کلاس رنگ دکمه رو به سبز تغییر میده .شاید براتون سوال پیش بیاد که میشه نام element هارو دو بخشی تعریف کرد ؟ بله چرا نمیشه ، اگر نام element را بخواهیم دو بخشی بنویسیم باید بخش دوم را با یک Dash (-) از بخش اول جدا کنیم مثل کلاس زیر :.card__exit-button--dangerبرای کسانی که از preprocessor های css یا همون پیش پردازنده هایی مثل sass استفاده میکنند این استاندارد میتونه خیلی کد هاشون رو تمیز و مرتب و همچنین حرفه ای نگه داره ، به مثال زیر توجه کنید : کد های بالا مربوط به پیش پردازنده SCSS هست سخن پایانیبه طور کلی استفاده از این استاندارد سخت نیست و با چندبار تمرین و تکرار میتونید به راحتی به این روش مسلط بشید و ازش استفاده کنید ، این روش باعث میشه شما دیگه توی نام کلاس ها گیر نکنید و اسم کم نیارید همچنین باعث یک دستی تمام کد های شما توی طول پروژه های کوچیک و بزرگتون میشه .البته باید بگم که هیچ اجباری در استفاده از این استاندارد نیست و شما میتونید از این استاندارد پیروی نکنید و قوانین خودتون رو داشته باشید هر چند باید گفت بهترین کار استفاده از استاندارد هایی هست که اکثر برنامه نویس ها اون رو میشناسن .امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید