OOCSSとBEMについて

様々なクラスの命名規則を見てきましたが、私が使えそうなものは以下の２つになりそうです。クラス同士の関係性が名前に含まれているとCSSで指定するのも楽になりそう。X)

OOCSS

 OOCSS は、 Object Oriented CSSの略で、オブジェクト指向CSSなどと日本語では呼ばれます。 SMACCSなどの基礎となる考え方で、以下の２つがポイントとなります。 Container（入れ物）とContents（中身）の分離 Structure（基本構造）とSkin（見た目）の分離

 Bootstrapを使ったことがある人であれば、理解しやすいのではないでしょうか。 シンプルなルールなので採用がしやすい反面、Bootstrapのように各UIに統一した名前をあらかじめ決めておかないと破綻しやすいです。

BEM

BEMは「Block」「Element」「Modifier」の頭文字をとったもので、それぞれ

 Block: モジュール全体のこと（今回の「.panel」のこと）

 Element: モジュール内のパーツのこと（今回の「.panel_photo」「.panel_txt」のこと）

 Modifier: モジュールのバリエーションのこと（今回の「.panel-red」のこと）

BEMに関して詳細に説明するとかなりややこしくなってしまうのですが、命名規則に関しては単純明快で Elementは「Block名 + 区切り文字 + Element名」 Modifierは「Block名 + 区切り文字 + Modifier名」 

Block（ブロック）

 例えば、次のようなコードの場合、searchという名前のBlockに、inputと、buttonという2つのElementが属していることになります。  

 一般的なWebページの場合、Blockは何度も繰り返し出現することが想定できます。そのためBlockを識別するためにはid属性を使わずclass属性を利用します。  

Block名を含めることでclass名は冗長になりますが、次のようなメリットがあります。 CSS上でセレクタを入れ子にする必要がなくなり、スタイルの優先度で頭を悩ませる必要がなくなる。 ルールが統一されるため、HTMLを見ただけで、どこからどこまでがひとつのBlockなのかがわかりやすくなる。 ひとつのElementはBlock内で何度も繰り返し利用できます。  

Modifier（モディファイア） 既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うものを作りたい場合には、新規にそれらを作るのではなく、Modifierを使うことができます。 例えば、同じリストで、行頭記号が2種類以上存在する場合や、同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合などです。 

次のようなコードの場合、menu__itemというclass名のElementに、state（状態）が違うものがあり、それはcurrentという現在地の状態を表すものだということがわかります。 

BlockとElementの区切り  

「Block__Element」と、区切り文字にアンダースコアを2つ繋げたものを使用します。 

Modifierの区切りと、Modifierのkeyとvalueの区切り 「Block_key_value」または「Element_key_value」のように、区切り文字にアンダースコア1つを使用します。 

単語の区切り BlockやElement名を、2つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。