Yeni Başlayanlar İçin BEM Nedir?

Bem Nedir?, Sadece programlamada değil css’de de bir şeyleri adlandırmak kolay değildir. Bazı programcılar isimlendirmeyi pek düşünmezler. Her sınıfın sahip olması gereken adı seçmek için yeterli zamanın olmadığını söylüyorlar. Bu doğru olabilir, ancak düşük kaliteli kodun uzun vadede geliştirilmesi önemli ölçüde daha uzun sürer. Bu nedenle, ad sorununu çözmenin birkaç yolu vardır, bunlardan biri Blok-Element-Değiştirici (BEM) olarak bilinir. Bu yazıda BEM’in ne olduğuna ve CSS kodunuzu düzenlemek için nasıl kullanılacağına daha derinlemesine bakacağız.

BEM Nedir?

BEM, Blok, Eleman ve Değiştirici anlamına gelir. Daha temiz ve daha okunabilir CSS sınıfları yazmak için bir CSS adlandırma kuralıdır. BEM ayrıca projenizde daha sonra tekrar kullanmak için bağımsız CSS blokları yazmayı da amaçlar.

// Blocks are named as standard CSS classes
.block {
}
// Elements declared with 2 underscores, after block
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}

Block nedir?

Bloklar bağımsız, yeniden kullanılabilir ve genellikle bir web sayfasının daha büyük bileşenleridir. Değiştiricileri olabilir ve öğeler içerebilirler.
Bir web sayfasındaki başlık, gezinme, bölüm, form, makale, kenar, altbilgi gibi daha büyük bölümleri blok örnekleri olarak sayabiliriz.
Örneğin, LinkedIn‘in Başlık Gezintisi bir blok olarak kullanılabilir ve şu şekilde bildirilebilir:

<header class="global-nav"></header>
<style>
.global-nav {
  // Rules
}
</style>

Elementler

Öğeler blokların çocuklarıdır. Bir öğenin yalnızca 1 üst Bloğu olabilir ve bu bloğun dışında bağımsız olarak kullanılamaz.LinkedIn Başlık öğelerine örnek:linkedIn logosu,arama alanı ve diğerleri.
Bir öğenin adı, üst Bloğunun adıyla başlamalı, ardından iki alt çizgi ve ardından öğenin kendi adıyla başlamalıdır.

<header class="global-nav">
  <div class="global-nav__content">
     <div class="global-nav__top-left-part">
        <a href="#" class="global-nav__branding">
           <img class="global-nav__logo" />
        </a>
        <div class="search-global">
           <input class="search-global__input" />
           <div class="search-global__icon-container">
              <img class="search-global__icon" />
           </div>
        </div>

     </div>
     <nav class="global-nav__top-right-part">
       <ul class="gloabl-nav__items">
                    <li class="gloabl-nav__item">
                        <a href="#" class="global-nav__primary-link">  
                            <img class="global-nav__icon"/>

                            <span class="global-nav__primary-link-text">Home</span>
                        </a>
                    </li>


                </ul>
    </nav>
  </div>
</header>

Değiştiriciler

Bloklar bağımsız, yeniden kullanılabilir ve genellikle bir web sayfasının daha büyük bileşenleridir. Değiştiricileri

Farklı durumlar veya sınıf stilleri değiştiriciler tarafından temsil edilir. Elemanların yanı sıra bloklar için de kullanılabilirler.
HTML’de, ek işlevsellik sağlamak için Blok / Öğe ile birlikte bir değiştirici kullanılmalıdır:

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

Bir değiştiricinin adlandırılması, ana Blok adıyla başlamalı, ondan sonra 2 tire gelmeli ve kendi adıyla bitmelidir.

Block – Değiştiriciler

.btn {
  // rules
  .btn--primary {}  // Block modifiers
  .btn--secondary {}
}