همه چیز درباره استاندارد 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 استفاده میکنند این استاندارد میتونه خیلی کد هاشون رو تمیز و مرتب و همچنین حرفه ای نگه داره ، به مثال زیر توجه کنید :

سخن پایانی

به طور کلی استفاده از این استاندارد سخت نیست و با چندبار تمرین و تکرار میتونید به راحتی به این روش مسلط بشید و ازش استفاده کنید ، این روش باعث میشه شما دیگه توی نام کلاس ها گیر نکنید و اسم کم نیارید همچنین باعث یک دستی تمام کد های شما توی طول پروژه های کوچیک و بزرگتون میشه .

البته باید بگم که هیچ اجباری در استفاده از این استاندارد نیست و شما میتونید از این استاندارد پیروی نکنید و قوانین خودتون رو داشته باشید هر چند باید گفت بهترین کار استفاده از استاندارد هایی هست که اکثر برنامه نویس ها اون رو میشناسن .

امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید