BEM入門

CSSのネーミングクラスは常に私にとって難しかったです😥. 幸運にも数ヶ月前、私はBEM命名規則に遭遇しました.命名規則は、(この場合CSSで)ものを命名するための同意されたスタイルです.smacssやamcssやbemなどの様々なCSS命名規則がありますが、この記事については、BEMについて話します.

必要条件

HTMLとCSSの基本的な知識.

どのような境界線
BEMはブロック要素修飾子に対して短く、HTMLとCSSのクラスのCSS命名規約です.
ブロックは、ヘッダー、フッタ、NAV、ボタン、入力、およびような構成要素を意味する.
要素-ブロック(コンポーネント)の内部にあります.これらは、親コンポーネント全体の子と見なされます.
一方、修飾子は、他の無関係なコンポーネントに影響を及ぼすことなくブロックまたは要素をスタイル化するために使用されます

なぜBEMを使うのか

BEMは、我々が読みやすくて、維持するのが簡単であるCSSを書くのを助けます.

大きなプロジェクトで

、BEMは、競合するスタイルがないことを保証します.

CSSコードの機能と目的を伝えます.

それは、開発者がよりよく特定のプロジェクトのHTMLとCSSの関係を理解するのを助けます.

BEMの使い方
今、我々はBemが何であるか、そして、なぜ我々がそれを使うべきであるかについてわかっているので、方法に飛び込む時間.親コンポーネントは、以下の例に示すように、単一のハイフンを使用して名前が付けられます

<section class="about-us">

一方、要素のクラス名にはアンダースコアが2つ追加されます.

<h3 class="about-us__title">best title </h3>

 <p class="about-us__text">I love bunnies</p>

修飾子を命名するとき、2つのハイフン(-)を使用して要素名を続けます

 <span class="about-us__title--green">ever</span>

すべてをまとめて置く

<section class="about-us">
     <h3 class="about-us__title">best title
        <span class="about-us__title--green">ever</span>
     </h3>
     <p class="about-us__text">I love bunnies</p>
</div>

私たちはこのようなスタイルを

.about-us{
    margin: 0 auto;
    color: #fff;
}
.about-us__title {
   font-weight: bold;
}
.about-us__title--green {
   color: #05b993;
}
.about-us__text {
    font-size: 24px;
}

SSSSそれも簡単にスタイルのbemになります.SCSSでスタイルを整えることは、このように見えます

.about-us{
  margin: 0 auto;
  color: #fff;
  &__title {
    font-weight: bold;
    &--green {
      color: #05b993;
    }
  }
  &__text {
    font-size: 24px;
   }
}

かなりクールな右?

結論
本当に、BEMは我々のCSSに理解しやすい固体構造を与えます.あなたは今それを得ることができませんが、私はあなたが時間と確信しています.Bemで楽しいネーミングをしてください.