ESC را فشار دهید تا بسته شود

آشنایی با متدولوژی BEM

معرفی متدولوژی BEM

این متدولوژی از ترکیب Block, Element, Modifier تشکیل شده که نام قراردادی اون BEM گذاشته شد که توسط تیم Yandex توسعه داده شده و هدف از ایجاد اون هم، درک بهتر رابطه بین HTML و CSS هست.

اگر پروژه شما خیلی بزرگ بشه و المان‌های زیادی داشته باشین و بخواین از CSS یا Sass یا هر چیز دیگه‌ای برای استایل دهی استفاده کنین قطعا نامگذاری المان ها می‌تونه مشکل‌تر و سخت‌تر بشه و اینکه آیا اصلا این اسم می‌تونه دقیقا به المان مورد نظر یا تگ مورد نظر من توی ساختار HTML من اشاره کنه یا نه؟

قرارداد BEM

طبق این قرارداد باید نام کلاس های CSS باید از ترکیب block, element و modifier ها باشه که به وسیله double undescores (__) و همینطور hyphens (-) جدا میشن.

سینتکس کلی BEM

block__element–modifier

ساختار کمپوننت BEM

  • Blocks : بالاترین سطح رو نشون میده که به تنهایی و مستقل هم موجودیت و معنی داره مثلا button, header, main, footer, aside و ….

که طبق قرارداد به این صورت توی CSS براشون استایل می‌نویسیم :

.block {
  ...styles
}
  • Elements : المنت یا المان ها یک بخش از block رو نشون میدن که بعد از اسم block با دوتا underscore (__) در ادامه اسم block میاد.

مثلا فرض کنیم ما یک button داریم که block مستقل ماست و توی button میخوایم از label استفاده کنیم که میشه element که بخشی از block رو تشکیل میده که اگر بخوایم به این element کلاس بدیم طبث قراراداد باید داشته باشیم :

.block__element {
  ...styles
}
  • Modifiers : میشه گفت modifier ها تغییرات یا به اصلاح variation های مختلفی از یک Element یا Block رو نشون میدن که با علامت خط فاصله یا hyphen (-) جدا میشه

نکته اینجاست که طبق سینتکس BEM حتما لازم نیست که modifier بعد از element بیاد بلکه میتونه تغییرات یک block و یا یک element باشه و حتما نیازی نیست که ترتیب اسم گذاری حفظ بشه که مثلا چون من element ندارم پس نمیتونم مستقیم بعد از block از modifier استفاده کنم

طبق قرارداد یک modifier میتونه به شکل زیر نامگذری بشه :

/* variation of the element */
.block__element--modifier {
  ...styles
}

/* variation of the block */
.block--modifier {
  ...styles
}

چرا BEM رو استفاده کنیم؟

۱- اگر بخوایم یک کامپوننت رو بسازیم یا تغییر بدیم خیلی راحت متوجه میشیم که شامل چه بخش هایی میشه (خیلی پیش میاد یک button رو استایلش رو عوض میکنیم و میبنیم همون کلاس توی صفحه دیگه روی یک button دیگه بوده و اونجا بهم ریخته)

۲- وابستگی ها رو متوجه میشیم حتی اگه ندونیم اون عنصر کجاس ولی میدونیم که این کلاس روی کدوم عنصرهای صفحه هم میتونه اثر بذاره

۳- اگر تیمی روی پروژه کار می‌کنین خیلی برای حفظ منطقی نامگذاری ها کمک میکنه (چون منطق نامگذاری من ممکنه با همکارم یکی نباشه و خب این باعث میشه یکم زمانبر بشه کار)

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

BEM فقط یک متدولوژیه که در صورت نیاز می‌تونین ازش استفاده کنین

ترکیب BEM و Sass

.block {
  @at-root #{&}__element {
  }
  @at-root #{&}--modifier {
  }
}

یک مثال واضح از BEM 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* BLOCK : card */
      /* .block */
      .card {
        background-color: #ffffff;
        border-radius: 0.5rem;
        max-width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1rem;
      }

      /* ELEMENT : title */
      /* .block__element */
      .card__title {
        font-size: 2rem;
        font-weight: bold;
      }
      /* ELEMENT : button */
      /* .block__element */
      .card__button {
        background-color: #ffffff;
        color: #212529;
        padding: 0.5rem;
        margin-bottom: 1rem;
      }
      /* MODIFIER : primary */
      /* .block__element--modifier */
      .card__button--primary {
        background-color: #212529;
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div class="card">
      <h3 class="card__title">Title Element</h3>
      <button class="card__button">Button Element</button>
      <button class="card__button card__button--primary">
        Primary Button Modifier
      </button>
    </div>
  </body>
</html>

و خروجی کد :

نمونه کد از bem

دیدگاه ها (2)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جذابترین موضوعات