どのようにBEMはカスタムCSSと大規模なアプリケーションを構築するに動作します.

この投稿は当初公表されたHackmamba
Webアプリケーションの進歩に伴い、さらに複雑なインターフェイスを構築する必要があります.これらのアプリケーションにはいくつかのカスタムCSSクラスがあります.結果として、CSSのクラス名を読みやすく理解できます.ブロック、要素、および修飾子(BEM)のアプローチは、このような状況で私たちを支援します.
BEM方法論と、カスタムCSSで大きなアプリケーションを構築するためにどのように使用するかを調べます.

前提条件

この記事に続くHTMLとCSSの基本的な理解が必要です.

BEM方法論

ヤンデックス(ロシアのIT会社)は、2005年にBEMを発明しました.BEMの主な目標は、我々のCSSの構造、読みやすさ、および柔軟性を維持するのを助けることです.
BEMはブロック、要素、修飾子を表します.BEMは独立したモジュールにCSSクラスを分割します.
BEM構文の例

.block__element_modifier {
    /* write your CSS styles*/
    }

ランダムなソースコードをオンラインで見て、クラス名を見るなら.btn__text_bold , それはけちです.暗号.btn__text_bold CSSの事前知識がないとしても分かりやすいです.それが境界線の美しさです.
BEMは、CSSクラスだけで動作します.CSSクラスでは、スタイルシートでクラス名を何度も再利用できます.

どのようなBEMとの利点は何ですか？

BEMを使用する多くの利点があります.ここにいくつかあります.

再利用性:BEMの再利用性のために、我々は維持するコードのより少ない線を持ちます.BEMは柔軟で扱いやすいコードを書くことができます.BEM再利用性は開発者のチームワークと生産性を増加させる

CSSの競合が少ない.

構造:私たちのコードは、より簡単に読み取り、理解すること、BEMで組織されます.

文字Bはブロックを表す。

ブロックは自分自身に耐えることのできる重要な要素であり、CSSの他の部分で再利用することもできます.クラス属性はHTMLのブロックを表します.ブロック名を親要素に代入します.
ウェブサイトで見られる最も一般的なブロックのいくつかは以下の通りです.

ヘッダ.

内容.

サイドバー.

フッタ

検索エンジン.

我々は自分自身で立つことができる重要な要素としてブロックを定義覚えていますか?どうやって動くの?

.btn {
    font-size: 2em;
    color: red;
    text-shadow: 1px 3px 1px black;
    } 

ブロック名は質問に答える.ブロック名から明らかです.btn 開発者はスタイリングbutton 要素.ブロック名.btn 読みやすく理解できます.
ブロック名では、以下のような質問に対する回答を見つけることができます.

「やつは何を?」入力要素にスタイルを適用します.

「その目的はなんですか?」入力要素をスタイル設定するには.

 .input {
     font-size: 2em;
    color: red;
    }

上の例では、開発者がスタイリングしていることがわかりますinput 要素.ブロック名は、開発者が何をしているかを明確に示します.
ブロック名はブロックの内容を説明します.ブロックがどのように見えるか、つまりその外観を教えてくれません.
上記のステートメントを説明する例を示します.
これをしないでください.

 /*wrong Practice*/
    <div class="green-content">
    <h2>CSS Is Fun</h2>
    </div>

上の例には、クラス名が含まれます.green-content . .green-content 外観を説明します.ブロック名の目的を教えてくれません.
代わりに

 /*Best Practice*/
    <div class="content">
    <h2>CSS Is Fun</h2>
    </div>

上の例にはクラス名が含まれます.content それは意味がある.外部の開発者は、彼らがそれを見たなら、コードを理解するのが難しいとわかりません.
複数の単語を含むブロック名を作成するにはどうすればよいですか?
ブロック名の大多数は、以下のような単一の単語で構成されています:

.input

.header

.btn

.content

.menu

私たちが長いブロック名を持っている場合、私たちはそれぞれの単語を一つのハイフン- .
例:

.btn-text

.btn-color

.menu-text

実際例

 .btn-color {
    font-size: 2em;
    color: red;
    text-shadow: 1px 3px 1px black;
     }

どのようにお互いのブロック名をネストできますか？

「巣」という用語は、別の内部の1つの要素の配置を指す.それで、我々が「巣ブロック名」と言うとき、我々は1つのブロック名をもう一つの中に入れることに言及します.
以下はブロック名の生成方法の例です.

  <header class="header">
    <img src="#" alt="#">  
     <nav class="navbar"> 
    /* Write your HTML elements */
    </nav>
    </header>

上の例では、ブロック.header もう一つのブロック.navbar 入れ子になった.

文字Eは要素を表す。

要素は常にブロック名の一部です.それは単独では存在できない.ブロック名と並んで配置しなければ意味がない.要素名を子要素に代入します.
要素名はダブルアンダースコアで始まる__ .
要素名の構文

 .block-name__element-name {
    /*write your CSS Styles */
    }

ブロック名のように、要素名の質問に答えると開発者のコードの明確な画像を与えます.
以下は要素名の例です.

.content__text

.header__img

.list__item

要素名の実例.content ブロック名として:

  1 <div class="content">
    2 <h2 class="content__title">Always Code</h2>
    3 <img class="content__img" src="#" alt="#">
    4 <p class=""content__description">coding everyday yields results</p>
    5 </div>

上の例では

1行目のブロックを含む.content 親要素に割り当てられますdiv .

2行目、3行目、4行目はdiv 子要素、親要素.

2行目、3行目、4行目にはすべて要素名があります.content__title , .content__img , and .content__description . 要素の名前は簡単ですので、開発者が取り組んでいることを知るのは簡単です.

ブロック名のように、要素名は要素が何をするかを記述します.それはどのように見えるか、つまりその外観を教えてくれません.
上記のステートメントを説明する例を示します.
これをしないでください.

 /*wrong Practice*/
    1 <div class="content">
    2 <h2 class="content__bold">CSS Is Fun</h2>
    3 </div>

行2の上の例はクラス名を含んでいます.content__bold . 外観を説明する.要素名の目的を教えてくれません.
代わりに

  /*Best Practice*/
    1 <div class="content">
    2 <h2 class="content__title">CSS Is Fun</h2>
    3 </div>

行2の上の例はクラス名を含んでいます.content__title それは意味がある.外部の開発者は、それを見た場合、そのコード行を理解するのは難しいことはないでしょう.

どのように、私は互いの中で要素名をネストすることができますか？

我々はすでに入れ子の定義を議論しました.我々は今までに精通すべきだ.迅速なリマインダーとして、“ネスト”という用語は、別の内部の1つの要素の配置を指します.それで、「巣要素名」と言うとき、私たちは一つの要素名を別のものに入れることを参照します.
パターンを使用することが重要です.block-name__element-name ネスト要素名.
要素名のネストの例を示します.
これをしないでください.

  <main class="main-content">     
    <div class="main-content__wrapper">         
    <h2 class="main-content__wrapper__title">Coding is fun</h2>         
    <p  class="main-content__wrapper__description">Remember to code today</p>     
    </div>
     </main>

上の例は.block-name__element-name パターン.私たちの要素の名前は、この方法でそれらをネストする場合は読むことが困難になります.
代わりに

  <main class="main-content">
        <div class="main-content__wrapper">
            <h2 class="main-content__title">Coding is fun</h2>
            <p  class="main-content__description">Remember to code today</p>
        </div>
    </main>

上の例は.block-name__element-name パターン.このように我々の要素名を入れ子にすることは、読みやすくなります.外部の開発者は、彼らがそれを見たなら、コードを理解するのが難しいとわかりません.

文字Mは修飾子を表します。

要素とブロック名の両方が何をするかを説明しますが、それは修飾子の場合ではありません.修飾子は、要素またはブロックがどのように見えるか、すなわち、その外観、サイズ、または動作を教えます.
修飾子の名前は、単一のアンダースコアで始まる_.修飾子名の構文

 .block-name__element-name_modifier-name {
    /*write your CSS Styles */
    }

Or

 .block-name_modifier-name {
    /*write your CSS Styles */
    }

修飾子は一人では我慢できない.ブロック名と要素名を使用します.
我々のブロックと要素名に修飾子を加えるかどうかを決めるのは私たち次第です.それらを使う義務はありません.Disabled , green , and bold 修飾名の例はいくつかあります.
修飾子は、類似のブロック名を持つHTML要素のスタイルを変更したい場合に役立ちます.
上記のステートメントを説明する例を示します.

 <button class="btn-text">
    sign up
    </button>

    <button class="btn-text btn-text_red">
    sign up 
    </button>

    <button class="btn-text btn-text_bold">
     sign up         
    </button>

上のコードで

我々は、同じブロック名を持つ3つのHTMLボタン要素を持っている.btn-text.

つのボタンHTML要素、修飾子名を与えましたred and bold . 我々が彼らに与えたのを思い出してくださいred and black 修飾子の名前を区別します.

修飾子の名前がどのように機能するかを理解してください.
修飾子がどのように動作するかについては、リソースセクションの記事を参照してください.

結論

この記事は、我々のプロジェクトのためのしっかりした基盤を構築するために、カスタムCSSでBEMを使う方法を私たちに教えました.
Web開発には他のアプローチがありますが、どれもBeMプロセスとして効果的であることは証明されていません.BEM方法論は、より組織的で読みやすいコードを書くことを可能にする.我々のコードがきれいで組織化されるならば、我々は将来の他の開発者と協力することができます.
資源
以下に役立つリソースをいくつか示します:

BEM Grandchildren: How To Handle Deeply Nested Elements

Introduction to BEM methodology

Quick Start to BEM Methodology