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

kojiokanoのブログ

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

LP_BEM命名規則

使用例

Block__Elements--Modifire

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

例 list__item--big

Modifireなどで一言で命名できなければ
(-)一つで繋げてあげる

key-value

例 list__item--text-center

クラスの付け方

主に迷うときはModifireを使用する時かと思いますが例をあげておきます。


.list .list--big
.list__item .list__item--big

ファイル単位

style.sass

  1. importはここで行う
  2. blockごとにコメントをつけてあげる(検索用)
  3. ブロックの命名参考 http://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

_mixin.sass

_variable.sass
変数を書くところ

_base.sass
生のタグを書くところ


header
main
footer
ul

_js.sass
js関連のcssはここにまとめる
ライブラリなどの場合で命名規則がBEMではない場合があると思いますがその部分はBEMに変換する必要性はない気がします。(時短という意味合いで!)
理想は変えてあげるほうがいい

_mdl.sass
MDLの書き換えを行うところ多分あまり使わないと思いますがフレームワークには微調整がつきものかと思いますので!