آموزش مدل bem در css

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

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

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

BEM (Block, Element, Modifier) یک مدل توسعه front-end محبوب است که برای ایجاد اجزای قابل استفاده مجدد و کد قابل نگهداری استفاده می شود. این برای بهبود بهره وری و کارایی اعضای تیمی که روی پروژه های وب کار می کنند طراحی شده است.

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

اما وقتی نوبت به پروژه های بزرگ میرسد، شما مجبور به رعایت یک سری قواعد و دستوالعمل ها هستید به چند دلیل:

• تعداد خط های کد زیاد است و مراجعه های بعدی باید همراه نشانگرهایی برای پیداکردن سرنخ باشد
• ممکن است توسعه کد را در آینده شخص دیگری در دست بگیرد
• در پروژه های رسمی بهتر است از قواعد بین المللی استفاده شود
• خودتان در آرامش و دقت بیشتری فرایند کدنویسی را ادامه خواهید داد
• و…

روش های مشابه BEM

روش‌های زیادی وجود دارد که هدفشان کاهش ردپای CSS، سازماندهی همکاری بین برنامه‌نویسان و حفظ پایگاه‌های کد CSS های بزرگ است، مانند:

OOCSS و SMACSS و SUITCSS و Atomic

اما چرا bem؟

دلیل انتخاب BEM نسبت به سایر متدولوژی‌ها به این نتیجه می‌رسد: این روش نسبت به روش‌های دیگر (مانند SMACSS) کمتر گیج‌کننده است.

اما همچنان معماری خوبی را که می‌خواهیم (یعنی OOCSS) و اصطلاحات قابل تشخیصی را در اختیار ما قرار می‌دهد.

bem مخفف سر کلمات Block, Element and Modifier میباشد.

BLOCK

موجودیت مستقلی که به تنهایی معنادار است. مانند : header, container, menu, checkbox, input

ELEMENT

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

مانند‌: menu item, list item, checkbox caption, header title

MODIFIRE

یک پرچم روی یک بلوک یا عنصر. از آنها برای تغییر ظاهر یا رفتار استفاده کنید. مانند :‌ disabled, highlighted, checked, fixed, size big, color yellow

نام گذاری به روش bem

فقط دو مشکل سخت در علوم کامپیوتر وجود دارد: عدم اعتبار کش و نامگذاری چیزها

فیل کارلتون

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

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

رویکرد BEM تضمین می‌کند که همه کسانی که در توسعه یک وب‌سایت شرکت می‌کنند با یک پایگاه کد واحد کار می‌کنند و به یک زبان صحبت می‌کنند. استفاده از نامگذاری مناسب شما را برای تغییرات در طراحی وب سایت آماده می کند.

قواعد Block

نام بلوک ممکن است شامل حروف لاتین، اعداد و خط تیره باشد. برای تشکیل یک کلاس CSS، یک پیشوند کوتاه اضافه کنید: .block

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

<div class=”block”>…</div>

قواعد Element

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

نام عناصر ممکن است شامل حروف لاتین، اعداد، خط تیره و زیرخط باشد. کلاس CSS به عنوان نام بلوک به اضافه دو خط زیر به اضافه نام عنصر تشکیل می شود: .block__elem

<div class=”block”>
…
<span class=”block__elem”></span>
</div>

قواعد Modifier

پرچم ها روی بلوک ها یا عناصر. از آنها برای تغییر ظاهر، رفتار یا حالت استفاده کنید.

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

کلاس CSS به عنوان نام بلوک یا عنصر به اضافه دو خط تیره تشکیل می شود، مانند:

.block–mod یا .block__elem–mod و .block–color-black با .block–color-red. فاصله ها در اصلاح کننده های پیچیده با خط تیره جایگزین می شوند.

<div class=”block block–mod”>…</div>
<div class=”block block–size-big block–shadow-yes”>…</div>

پس این نکته کلیدی را به یاد داشته باشید، قوانین نامگذاری به ما می گوید که از دستور block–modifier-value استفاده کنیم.

امیدوارم از مطالعه مقاله آموزش مدل bem در css لذت برده باشید.

موفق باشید دوستان من♥

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.