BEM CSSの整理方法

6659 ワード
方法論 クラス名 BEM テキストリンク

BEMは？


block、Element、Modifierの3つの形式で命名され、それぞれ和--で区切られています.
また、「何の目的」によって命名されます.
  .header__nav--nav-text {
    color: blue;
  }

1.最大ブロック


  <header class="header">
    <div class="header__inner">
      <div class="header__logo"></div>
      <div class="header__search"></div>
      <div class="header__author"></div>
      <nav class="nav"></nav>
    </div>
  </header>
上のコードにあります.タイトルはblockです.ヘッダーで始まるすべてのタグはelementです
.navはblockで、他の場所でも独立して使用できるので、このように命名されました.

2.要素単位の寸法

  <div class="header__logo">
    <div class="logo">
      <a href="#" class="logo__link">
        <h1 class="blind">Logo</h1>
      </a>
    </div>
  </div>
.headerlogoで独立して使用されています.ロゴをブロックに合成
この場合.headerlogoはheader内でlogoを位置決めするために使用されます.logoはlogo画像を指定するために使用されます.
ex)header logoはheaderの要素であるためheaderでの位置決めに用いられ、logoはblockであるため造形(背景色、フォント指定など)に用いられる.

長所を整理!

  • クラス名、識別可能な寸法構造
  • とSCSSの文法は完璧に結合しています!
    • 親参照者の使用が容易(&)
  • SCSSで要素
    • を簡単に検索
  • 引き伸ばしを阻止する選択

    • でも欠点もある

  • カリキュラム名が長すぎる可能性があります.
  • 文字と下欄が混在している場合、ダブルクリックで選択するのは不便です.
    • [アルゴリズム]2つを抽出して追加
    ばねMVC構造