روش نامگذاری BEM

نویسنده پوریا ستایش پوریا ستایش
1399/04/15
0
332
زمان مطالعه 12 دقیقه
روش نامگذاری BEM

سلام، تو دنیا دو نوع برنامه نویس سمت کاربر هست. دسته اول اونایی که همیشه وقتی میخوان نام کلاس ها رو برای استایل دهی انتخاب کنن یه کم فکر میکنن به اسم مناسب برسن و دسته دوم اونایی که همینجوری بی دقت اسم ها رو انتخاب میکنن و به فکر خودشون یا برنامه نویسی که بعدا میخواد کدها رو ویرایش کنه نیستن.

ولی شاید دسته سومی بشه برای برنامه نویس ها در نظر گرفت ، اونایی که میخوان توی هر چیزی با ساختار مناسبی کد بزنن که بعدا بتونن به راحتی کد هاشون رو بخونن و ویرایش کنن.
ولی این کار توی Html & CSS چجوری ممکن میشه؟ مگه میشه؟ آره میشه ،با BEM میشه این کارو کرد. ما توی این مقاله BEM رو به صورت کامل پوشش دادیم و میخوایم قوانین اون رو بررسی کنیم و بگیم چرا BEM از بقیه روش ها بهتره پس با ما همراه باشید.

در برنامه نویسی سمت کاربر ، BEM یک سری قوانین و روش است که به شما کمک می کند کامپوننت ها یا کد هایی بنویسید که قابل استفاده ی مجدد باشند.
روش BEM در CSS و پیش پردازشگر SASS کاربرد دارد و به تنهایی هیچ گونه کدی را شامل نمی شود فقط یک سری قوانین و روش را تعیین کرده است که به ما کمک می کند تا کد های قابل خواندن و قابل استفاده ی مجدد بنویسیم.

BEM به طور خلاصه مخفف عبارت Block Element Modifier می باشد. BEM بسیار قدرتمند ، صریح ، ساده و پر کاربرد می باشد همچنین به شما کمک می کند کد های سمت کاربرتان مقیاس پذیر ، آسان برای استفاده، قابل فهم و  بسیار دقیق نوشته شوند.

روش های نامگذاری برای چه پروژه هایی مفید هستند؟

روش های نام گذاری زمانی مهم می شوند که شما هم زمان در حال کار با تیم های مختلفی هستید که روی پروژه های متفاوتی کار می کنند و همچنین کارایی بالا ضرروری ترین نکته است.

همچنین برای پروژه هایی که مدت زمان طولانی صرف نوشتن آنها می شود نیز بسیار حائز اهمیت می باشند.

انواع روش نام گذاری در CSS

تعداد زیادی روش وجود دارد که هدفشان کاهش کد های نامفهوم ،سلکتور های طولانی و ایجاد یک زبان ثابت بین برنامه نویسان سمت کاربر است. مثل OOCSS و SMACSS و SUITCSS و Atomic و ... که شما میتوانید در موردشان تحقیق بفرمایید.

چرا BEM را یاد بگیریم؟

چرا BEM را یادبگیریم BEM چیست

به گفته ی سایت رسمی BEM ، سه ویژگی برای BEM قابل بررسی می باشد :

BEM آسان است.

همانطور که گفته شد BEM هیچ کدی را شامل نمی شود فقط ما باید یک سری قوانین را رعایت کنیم.

BEM ماژولار است.

بلاک ها و سلکتور های CSS مستقل ، به شما کمک می کند تا از کدی که قبلا نوشتید به راحتی در قسمت های دیگر پروژه یا در پروژه های جدیدتان استفاده کنید و این مزیت را در اختیار ما می گذارد، کلاسی که نوشته ایم به کلاس دیگری ربط ندارد و به راحتی قابل استفاده در جاهای دیگر است.

BEM بسیار منعطف است.

با استفاده از BEM ، روش ها و ابزار ها در اختیار شما هستند تا آن طور که میخواهید آن ها را تنظیم کنید.

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

چرا نامگذاری BEM از بقیه روش ها بهتر است؟

به طور کلی مهم نیست که از چه روش نام گذاری استفاده می کنید، مهم این است که شما میخواهید از فواید استایل های ساختار یافته CSS بهره ببرید.

روش نامگذاری BEM این تضمین را به شما می دهد، شما و هر کس دیگری که در توسعه ی سایتی مشارکت می کنید، متوجه کد های همدیگر بشوید.

در سایت های کوچک ، سازماندهی استایل های خودتان یک نگرانی محسوب نمی شود ولی وقتی این سایت شروع به بزرگ تر شدن می کند، بررسی استایل ها در این سه نکته خلاصه می شود :

  • چه مقدار کدی باید بنویسید.
  • چه مدت زمانی طول می کشد تا استایل های خودتان را بنویسید.
  • چه مدت زمانی طول می کشد تا مرورگر کد های شما را لود کند.

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

ساختار BEM

قبل از بررسی قوانین باید بدانیم BEM مخفف عبارت  Block Element Modifier است که در ادامه در مورد هر  کلمه توضیح می دهیم.

Block

یک موجودیت مستقل که به تنهایی دارای مفهوم می باشد مثل Header و Footer و Container و Menu و Checkbox و input در تصویر سعی شده است با مفهوم block آشنا شوید.

بلاک در BEM به چه معناست؟

Element

یک بخشی از یک بلاک می باشد که به تنهایی مفهومی را منتقل نمی کند و مفهومش وابسه به یک بلاک می باشد. مثل لینک های یک منو در سایت ، توضیح یک چک باکس یا عنوان یک هدر در سایت

در تصویر زیر المنت های یک منو در نامگذاری کلاس BEM مشخص است.

المنت در Bem به چه معناست؟

Modifier

به کلاسی که ظاهر یا رفتار یک Element یا Block را تغییر می دهد گفته می شود.

به عنوان مثال یک دکمه ی غیر فعال را در نظر بگیرید این دکمه در حالت عادی یک ظاهر قابل تشخیصی دارد ولی در حالت غیر فعال ظاهر مرده ای به خود می گیرد.

اگر کلاسی داشته باشیم که این ظاهر غیر فعال را در دکمه ی ما ایجاد کند به آن کلاس Modifier یا اصلاح کننده گفته می شود.

همچنین مواردی مثل checked و highlited و fixed و size-big و color-yellow

یک Modifier در روش نامگذاری BEM حساب می شوند.

در اینجا یک مثال ساده را بررسی خواهیم کرد. ما یک دکمه معمولی برای بیشتر قسمت های سایت داریم و برای شرایط خاص دو حالت برای این دکمه در نظر گرفته ایم.

به عنوان مثال برای کاری حساس از رنگ قرمز و عنوان Danger استفاده میکنیم و برای کاری موفقیت آمیز از رنگ سبز و عنوان Success استفاده میکنیم.

توجه داشته باشید که در پیاده سازی دکمه ، اینکه از چه تگی استفاده شده است اهمیت چندانی ندارد میتواند از تگ button، تگ a و یا حتی تگ div باشد.

کد Html زیر را به همراه کلاس هایش در نظر بگیرید :

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

حالا نگاهی به استایل های سی اس اس بیاندازید :

.button {
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-color: #ededed;
}
.button--state-success {
	color: #FFF;
	background-color:green;
}
.button--state-danger {
	color: #FFF;
	background-color:red;
}

قوانین نامگذاری BEM

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

Block

اسم block می تواند شامل حروف لاتین انگلیسی،اعداد، و خط تیره باشد.

نکته تورفتگی : بلاک‌ها را می‌توان داخل یکدیگر استفاده کرد. همچنین عمق این تورفتگی‌ها به هر تعدادی می‌تواند باشد.

نکته جاگیری دلخواه : بلاک‌ها به علت ماهیت مستقلشان می‌توانند بدون نیاز به تغییر در کدهای CSS یا جاوااسکریپتی که دارند، به هر نقطه‌ای از صفحه جابجا شوند.

به عنوان مثال داریم :

کد Html

<div class="block">...</div>

کد Css

.block { color: #042; }

Element

همانطور که قبلا اشاره کردیم Element بخشی از Block است و به تنهایی مفهوم ندارد و معنایش وابسته به block است پس طبیعی است از نام block در نام element استفاده شود.

هر تگی داخل یک block می تواند یک element باشد.

Element ها نیز می توانند شامل حروف لاتین انگلیسی، اعداد، خط تیره و  مهمتر از همه Underline باشند.

برای نوشتن اسم یک المنت باید از اسم بلاک استفاده کنیم و بعد از آن دو underline قرار دهیم و اسم element مورد نظر را بنویسیم.

به عنوان مثال داریم:

کد Html

<div class="block">
	Something
	<span class="block__elem"></span>
</div>

کد CSS

.block__elem { color: #042; }

مثالی که در بالا نوشته شد به شکل کاملا صحیح می باشد ، توجه داشته باشید که نوشتن اسم تگ در سلکتور ها اشتباه می باشد و نباید به شکل زیر باشد!

.block .block__elem { color: #042; }
div.block__elem { color: #042; }

در جاهایی که المنت های تو در تو داریم هیچوقت کلاس را به صورت block__mainelement__subelement ننویسید. برای حل این مشکل می توانید به صورت زیر عمل کنید.

.block__mainelement { color: red; }

.block__subelement { color: black; }

Modifier

Modifier نیز می تواند شامل حروف انگلیسی، اعداد، خط تیره و Underline باشد.

البته من از underline در Modifier استفاده نمی کنم چون به نظرم یک مقدار گیج کننده به نظر میاد، استفاده یا عدم استفاده از آن به خود شما بستگی دارد و منعی ندارد.

کلاس های Modifer از اسم block یا element استفاده می کنند و بعد از آن ها دو خط تیره قرار میگیرد.

به عنوان مثال داریم :

کد html

    <div class="block block--mod">
        Dornam
    </div>
    <div class="block block--size-big block--shadow-yes">
        Something
    </div>

همچنین توجه داشته باشید استفاده از Modifier به تنهایی اشتباه است ، یعنی وقتی برای block یک modifier می نویسیم باید به همراه کلاس بلاک به کار برده شود و وقتی برای element یک modifier می نویسم باید به همراه اسم element در کلاس ها به کار برده شود.

به مثال اشتباه زیر توجه کنید ، به هیچ وجه نباید به شکل زیر یک modifier تعریف کنید.

<div class="block--mod">...</div>

ممکن است بخواهید برای یک block یک modifier بنویسید و  المنت های موجود در آن بلاک تحت تاثیر این modifier قرار بگیرند.

فرضا ما یک card داریم و به آن مودیفایر card--dark را اختصاص داده ایم، المنت های موجود در این card--dark باید ویژگی هایی که مربوط به حالت dark است را بگیرند.

برای این کار به صورت زیر عمل میکنیم.

کد html

<div class="card card--dark">
    <p class="card__paragraph">
        Hey there...
    </p>
</div>

کد css

.card
{
    border:1px solid #ededed;
}
.card__paragraph
{
    color:black;
}

/*==== Dark Mode ====*/
.card--dark
{
    background-color: black;
}
.card--dark .card__paragraph
{
    color:white;
}

نوشتن modifer برای یک element نیز به شکل زیر می باشد.

کد html

<p class="text">
    <span class="text__details text__details--danger">
        Hey there...
    </span>
</p>

کد css

.text__details--danger
{
    color:red;
}

همانطور که مشاهده کردید فقط از خود کلاس modifier برای استایل دادن استفاده شد.

مثال آخر BEM

در نهایت با یک مثال مبحث نامگذاری BEM  را به پایان می رسانیم.

فرض کنید شما یک فرم دارید که بلاک اصلی حساب می شود ، همچنین میخواهیم از یک theme به اسم xmas برای فرم اسفاده کنیم. ما یک modifier دیگر نیز برای حالت simple:true برای بلاک فرم در نظر گرفته ایم.

همچنین فرم ما شامل یک input از نوع text و یک input از نوع submit می باشد که submit ما یک modifier ، برای حالت disable  دارد.

شاید مثال کمی گیج کننده به نظر بیاید ولی با نگاه به کد ها متوجه خواهید شد.

نحوه ی نام گذاری و ساختار کلاس ها در Html باید به صورت زیر باشد :

<form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input
      class="form__submit form__submit--disabled"
      type="submit" />
</form>

ساختار کلاس ها در سی اس اس باید به صورت زیر باشد :

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

در نهایت از اینکه این مطلب را خواندید تشکر می کنم همچنین اگر سوال یا مشکلی در مورد این مبحث دارید خوشحال می شویم در قسمت نظرات عنوان کنید.