HTML作成の効率化（1）-設計編

				
.box .boxinnner .title{color:red}
			

boxクラス下のboxinnnerクラス以下のtitleクラスに反映

				
.hogehoge{color:red}　
.top_box_boxinnner_title{color:red}
			

hogehoge? 何に使うクラス?
boxクラス下のboxinnnerクラス以下のtitleクラス専用?

前者は使い回しが不可能で、後者は使用がためらわれます。

このようなクラスがあることで混乱を招き、まったく同じ内容のクラスが量産されてしまうかもしれません。

OOCSS

• オブジェクト指向
• 構造とデザインの分離
• コンテナと内容の分離

  
  <button class="btn bgc- red">ボタン：赤</button>
  <button class="btn bgc- blue">ボタン：青</button>
  

  
  .btn{
  		color:white;
  		padding:20px;
  		}
  .bgc- red{background- color: red;}
  .bgc- blue{background- color: blue;}
  

• 形が同じで背景色だけ異なるボタン。背景色だけをクラスで変更しています

BEM

• 命名規則が厳格
• 要素を Block、Element、Modifier に分ける
• BEMをクラス名に適用するために「MindBEMding」という規則がある
• BEM公式サイト
• MindBEMdingとは（日本語訳）

html:MindBEMding

<button class="btn bgc--red"><i class="btn__icon btn__icon--01">icon01</i>ボタン：赤</button>
<button class="btn bgc--blue"><i class="btn__icon btn__icon--02">icon02</i>ボタン：青</button>

css:MindBEMding命名規則のパターン

.block {}…高レベルに抽象化されたもの、コンポーネント
.block__element {}….blockをサポートする子孫
.block--modifier {}….blockの異なる状態をあらわす

• 背景色を変えるクラスの使い方はOOCSSと類似。[--][__]に役割があることに注目
• クラス名から要素の役割が明確にわかる
• クラス名がとにかく長くなりがち

SMACSS

• 要素を Base、Layout、Module、State、Theme に分ける
• 命名規則はBEMより緩やか
• デザインのためのidは使用しない。（JavaScriptのトリガー、ページ内リンクアンカーはこの限りではない）
• レイアウト要素であることを明確にするためのプレフィックス[l-][layout-]を使用
• モジュール要素は再利用が出来るよう、親要素からの指定をしない
• 状態を表すプレフィックス[is-]を使用
• SMACSS公式サイト

<div class="l-main">
<button class="btn bgc-red">ボタン：赤</button>
<button class="btn bgc-red is-active">ボタン：赤</button>
</div>

FLOCSS

• OOCSS、SMACSS、BEM、SuitCSSなどの影響を受けた国産の設計思想
• Foundation、Layout、Objectの3つのレイヤーとObjectの子レイヤー（Component、Project、Utility）で構成
• レイヤーごとにプレフィックスを使用
• 命名規則はMindBEMdingを使用
• レイヤーごとにディレクトリを分割して管理することを推奨
• FLOCSS公式サイト

css:FLOCSS

.c-btn {}
.c-btn--primary {}

.p-articles {}
.p-article  {}

.p-article__title  {}
.u-clearfix  {}

MCSS

• OOCSS、BEMを基にした設計思想
• Foundation、Base、Project、Cosmetic、Context の5つのレイヤーで構成
• 各レイヤーを読み込む順番が決まっている

css:MCSS

.module {}
.module_list {}
.module_list.__modifier {}