Rengaver

Tam Versiyon: CSS'de BEM Nedir ve Nasıl kullanılır?
Şu anda arşiv modunu görüntülemektesiniz. Tam versiyonu görüntülemek için buraya tıklayınız.
BEM (Block Element Modifier) 2009 yılında yandex tarafından geliştirilen bir CSS yazma kuralıdır. BEM'in ortaya çıkış amacı yazılımcıların tarayıcının nasıl CSS okuduğunu kavrayabilmesidir. BEM standartlarına göre CSS yazmak basittir ve kullanışlıdır. Bu standartta yazılan kodlarla tarayıcı çok az sayıda bloklanır ve sayfalar daha hızlı yüklenir. Bir menünüzün olduğunu düşünün, iç içe bir sürü yazı var menüde. Normal CSS ile şu şekilde yapardık.
PHP Kod:
<!DOCTYPE html>
<
html lang="tr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Normal CSS</title>
    <style media="screen">
      body{
          margin:0;
          padding:0;
          outline:0;
          background:silver;
      }
      /*bloklandı*/
      .yazi{
        width350px;
        margin0 auto;
      }
      /*bloklandı*/
      .yazi .p{
        width100%;
        backgroundrgb(244,244,244);
        margin:10px auto;
        text-aligncenter;
      }
      /*bloklandı*/
      .yazi .kirmizi{
        backgroundred;
        color:white;
      }
      /*bloklandı*/
      .yazi .yesil{
        backgroundgreen;
        color:white;
      }
    </style>
  </head>
  <body>
    <div class="yazi">
      <div class="p kirmizi">
        lorem impsum bilmem ne
      
</div>
      <div class="p yesil">
        lorem impsum bilmem ne
      
</div>
      <div class="p">
        lorem impsum bilmem ne
      
</div>
    </div>
  </body>
</
html
Gördüğünüz gibi tarayıcı bu sayfayı render etmeye çalışırken her yeni class isminde bloklandı. Oysa BEM standartlarına göre CSS yazacak olsaydık
PHP Kod:
<!DOCTYPE html>
<
html lang="tr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>BEM Standartlarında CSS</title>
    <style media="screen">
      body{
          margin:0;
          padding:0;
          outline:0;
          background:silver;
      }
      /*bloklandı*/
      .yazi{
        width350px;
        margin0 auto;
      }
      /*bloklanmadan devam etti*/
      .yazi__p{
        width100%;
        backgroundrgb(244,244,244);
        margin:10px auto;
        text-aligncenter;
      }
      .yazi__p--kirmizi{
        background:red;
        color:white;
      }
      .yazi__p--yesil{
        background:green;
        color:white;
      }
    </style>
  </head>
  <body>
    <div class="yazi ">
      <div class="yazi__p yazi__p--kirmizi">
        lorem impsum bilmem ne
      
</div>
      <div class="yazi__p yazi__p--yesil">
        lorem impsum bilmem ne
      
</div>
      <div class="yazi__p">
        lorem impsum bilmem ne
      
</div>
    </div>
  </body>
</
html
Kodumuz bu şekilde olacaktı. Dikkat edilmesi gereken noktalar şunlar selectorler class olmalı ve modifierler -- ile devam etmeli. yani .blok__adi--modifier şeklinde.