読者です 読者をやめる 読者になる 読者になる

kojiokanoのブログ

コーディング業務で困ったところをまとめています。

LPのBEMルール

BEMルールを共通化して誰が見ても理解できて編集しやすいLPをつくることが目標

 

 

 

使用例

Block__Elements--Modifire

__Elements はアンダーバーを2つ使用
--Modifire はハイフンを2つ使用

例 list__item--big

 ↑なぜこのような書き方かと言うとLPのフレームワークがMDLを採用しているため(MDLはBEMを使用している)MDLで使われている書き方と同じにしたからである。

同じファイル内で2種類以上の命名規則が存在すると混乱するためMDLの命名規則にあわせている。

 

なるべく独自性の強いクラス名は付けない(汎用性が低くなるため)

.mt10みたいなパーツは作らないでBEMに忠実に命名する ※(margin-top:10px;)

classはstyle.sassに記述する_baseにはheaderやh1などのクラスではないオリジナルな要素のstyleを書くのでclassのstyleはstyle.sassに書くこと。

 

例えば下図のようなヘッダーがあったらブロックごとにBEMで命名していく。(headerという大きなブロックの中にエレメントとしてロゴなどが入っているのではなく、headerのブロックにlogoのブロックが入っている構造にすること。親要素を継承し続けるとcssが複雑になりわかりづらくなるので、ブロックの中にブロックがある状態でつくるほうがよい。)

f:id:kojiokano:20161212123625p:plain

 

 

 sass書き方例

.main
  width: 100%
  overflow: hidden
  display: table
  padding: 0

  &__item
    float: left
    position: relative
    vertical-align: top
    height: 24px
    line-height: 24px

    &__item--active
      float: left
      position: relative
 

 BEMの関係: main__item--active      

mainがblock,itemがelement,activeがmodifire

 

 

これから↓調べてまとめること

 

●ブロックのあとにモディファイアをつけてもOK!

 

●汎用性のあるクラスを作る必要は無い。ルール

 

●box-sizing

 

●フレッスボックス