初心者のためのBEM

プログラミングにおけるネーミングはプログラミングではなくCSSでも簡単ではない.一部のプログラマは、多くの思考を命名しないでください.彼らは、各クラスが持つべき名前を選ぶのに十分な時間がないと言います.それは本当かもしれません、しかし、低品質コードは長期的に発展するためにかなり長くかかります.したがって、名前の問題を解決する方法はいくつかあります.私たちは、BEMがどのようなものであるか、そして、このポストであなたのCSSコードを手配するためにそれを使う方法をより深く見ます.

どのような境界線は何ですか？

BEMはブロック、要素、修飾子を表します.これは、CSSのネーミングコンベンションのクリーナーと読みやすいCSSクラスを書くためです.
また、あなたのプロジェクトで後でそれらを再利用するために独立したCSSブロックを書くことを目指します.

// 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 {
}

何がブロックですか？

ブロックは独立していて、再利用可能で、通常、ウェブページのより大きな構成要素です.修飾子を持ち、要素を含めることができます.
ブロックの例としてWebページのようなヘッダー、nav、セクション、フォーム、記事、脇、フッターの大きな部分を数えることができます.
例えば、LinkedInのヘッダーナビゲーションをブロックとして使用することができます.

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

元素

要素はブロックの子です.要素は1つの親ブロックを持つことができ、独立してそのブロックの外側で使用することはできません.LinkedInヘッダー要素の例は以下の通りです.
要素の名前は親ブロックの名前から始めなければなりません.

<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>

修飾子

クラスの異なる状態やスタイルは修飾子で表されます.これらは、ブロックだけでなく、要素に使用することができます.
HTMLでは、ブロック/要素と共に修飾子を使用して追加機能を提供します.

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

修飾子の命名は、その親ブロック名、それ以降の2つのダッシュ、および独自の名前で終了する必要があります.

ブロック修飾子:

.btn {
  // rules
  .btn--primary {}  // Block modifiers
  .btn--secondary {}
}{% youtube LPHobzrF8xw %}

アクションで見る

結論

BEMは、CSSをオーサリングする新しい方法です.しかし、それが無効であると主張して、Bemに対する若干の議論があります.
あなたがBEMを使用するかどうかはあなた次第です、あなたのチーム、そして多分プロジェクトです.あなたの考えは何ですか?あなたは、BEMを使うのを好みますか?
もし私の作品が好きなら

私はより多くのプロジェクトをもたらすことができるように、あなたのための記事
Web開発についてもっと知りたい場合は