وقتی برنامه نویسی تصمیم بگیرد از شرکت برود چه اتفاقی می افتد؟ کدهای نوشته شده توسط او به شرکت واگذار میشود و شرکت برای ادامه کار, یک برنامه نویس جدید دعوت به همکاری میکند. حالا این کدنویس جدید باید بتواند کدهای قبلی را درک کند. برای خوانایی کد ها در اینجور مواقع از استانداردی به نام BEM استفاده میشود.
کلمه BEM مخفف کلمات Block , Element , Modifier است. ایده ای که پشت BEM است جداسازی کمپوننت های تکرار شونده است. بجای تکرار و کپی پیست کردن کدها کافیست یکبار آن ها را استایل دهی کنیم و این استایل ها را به یک کلاس نسبت دهیم. حالا از این کلاس تکرار میکنیم و بلاک میسازیم. شایان ذکر است در استاندارد BEM از id استفاده نمیشود و فقط از class بهره میگیریم.
طبق تعریف سایت bem.info , بلاک, یک کمپوننت مستقل در صفحه است که میتواند بارها مورد استفاده قرار گیرد. بلاک در html داخل اتریبوت class نوشته میشود. برای نامگذاری یک بلاک از هر نامی استفاده نمیشود. نام باید بر اساس هدف ایجاد بلاک باشد و اینکه این بلاک چیست؟ مثلا منو یا نوبار است شاید هم دکمه است. نامگذاری بر اساس استایل اشتباه می باشد. مثلا اگر کمپوننتی قرمز رنگ باشد شما نمیتوانید بخاطر قرمز بودنش red را به عنوان بلاک آن در نظر بگیرید.
<!-- Correct. The `error` block is semantically meaningful --> <div class="error"></div> <!-- Incorrect. It describes the appearance --> <div class="red-text"></div>
به بخشی از بلاک که نمیتواند جدا از آن شود, المنت گویند. به عنوان مثال تگ <li> یک المنت میتواند باشد برای بلاک <ul> و همانطور که میدانید <li> ها همگی یک <ul> دارد. برای نامگذاری المنت شبیه بلاک که از هدف بلاک برای نامگذاری اش استفاده میکردیم اینجا نیز از هدف و چیستی یک المنت برای نامگذاری اش استفاده میکنیم با این تفاوت که قبل از نام المنت باید نام بلاک مربوطه پیشوند آن بیاید.
وبلاگ با برنامه
مطلب مرتبط
آموزش Communication در هوانوردی<!-- `search-form` block -->
<form class="search-form">
<!-- `input` element in the `search-form` block -->
<input class="search-form__input">
<!-- `button` element in the `search-form` block -->
<button class="search-form__button">Search</button>
</form>
مدیفایر یک کلاس جدا از کلاس المنت خود یا بلاک خود است که در آن کلاس, استایل مربوط به رفتار, ظاهر و نما مانند رنگ مشخص میشود. در نامگذاری مدیفایر بجای هدفش به ظاهرش اشاره میشود. مثلا سایز, رنگ یا یک theme ! به مثال زیر توجه فرمایید!
<!-- `search-form` is block! --> <!-- `theme` is modifier! its value is `islands` --> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <!-- The `button` element has the `size` modifier with the value `m` --> <button class="search-form__button search-form__button_size_m"> Search </button> </form>
دو نوع مدیفایر وجود دارد. مدیفایر های boolean یا حاضر هستند یا غایب هستند. مقادیر آنها true یا false است. برای مثال خاصیت disabled بودن اگر برابر با true باشد ممکن است به معنای ناپدید شدن بلاک باشد. در کنار مدیفایر های boolean از مدیفایر های key-value استفاده میشود. برای این مدیفایر ها مهم است که مقدار مدیفایر چیست. مثلا میخواهیم theme تیره را فعال کنیم یا روشن یا islands ؟ در نامگذاری یک آندرلاین استفاده میشود مثلا چیزی شبیه theme_islands !
<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
<input class="search-form__input">
<!-- The `button` element has the `disabled` Boolean modifier -->
<button class="search-form__button search-form__button_disabled">Search</button>
</form>
از مطالعه شما سپاسگذارم!
دیگه نگو شام چی بپزم !! ○مجله آشپزی شکمو○
مشاهده
