بستن شکاف دانش: قراردادهای نامگذاری CSS – BEM

ek3nk4r 2023-02-19

0 36 خواندن این مطلب 2 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

زمانی که من CSS یاد می گرفتم، همیشه فقط به صورت تصادفی نام می بردم .navBar یا .nav-bar یا .navarea. من در همه جا بودم و این به روزهای خسته کننده زیادی منجر شد که چرا CSS من کار نمی کند و پاسخ معمولاً در HTML من بود. class="navBar" و CSS من در حال تلاش بود .nav-bar{}.

فهرست مطالب

خوب:

BEM مخفف “Block Element Modifier” است.

BEM یکی از پرکاربردترین قراردادهای نامگذاری CSS است و اغلب همراه با چارچوب های جاوا اسکریپت مانند React استفاده می شود. رویکرد BEM در استفاده از نام‌های کلاس توصیفی که هدف هر عنصر را توصیف می‌کند، می‌تواند کار با CSS را در معماری مبتنی بر مؤلفه آسان‌تر کند.

اجزای اصلی BEM:

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

نحو

نام کلاس های BEM معمولاً با استفاده از نحو زیر ساخته می شود:

.block {}
.block__element {}
.block--modifier {}

برای مثال، اگر بلوکی داشتید که یک منوی پیمایش را نشان می‌داد، می‌توانید از نام‌های کلاس زیر استفاده کنید:

.nav {}
.nav__item {}
.nav__item--active {}

این ساختار به ایجاد نام‌های کلاسی واضح و ثابت کمک می‌کند که خواندن و درک آسان باشد. BEM اغلب همراه با چارچوب های جاوا اسکریپت مانند React استفاده می شود، زیرا می تواند به ایجاد مؤلفه های سازماندهی شده و قابل نگهداری کمک کند.

مثال کد

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link--active">Home</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">About</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link nav__link">Services</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">Contact</a>
    </li>
  </ul>
</nav>

.nav {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.nav__list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 80%;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
  padding: 0;
}

.nav__link {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.nav__link--active {
  color: green;
  font-weight: bold;
}