このエントリは、以下の記事の部分詳細です。Sassディレクトリ管理における2種類の分類のうち、2種類目の「データ分類」の詳細を記しています。

元記事： CSS設計・Sassディレクトリ管理の標準化（CROCSS）
- 遷移元のセクション

データ分類の詳細説明

以下の4種類と、下層にあたるもの全てについて説明します。

Block
Parts
→ Module / Component / Element
Structure
→ Part / Divider / Layout / Grid
Utility
→ Apend / State / ID (Identifier)

1 ・ Block

Block（ブロック）は、情報の意味や役割的に自立・独立した領域や区画・塊です。block/のディレクトリで部品を管理します。

HTML Partsの定義をそのまま仕様するため、詳細な説明については「別記事：HTML Parts > Block」をご確認下さい。

Contents領域で使う場合は、内部にStructureを設置してからPartsを設置していくと、全てを疎結合で管理しやすくなります。

Blockのコード例

ドキュメントルートのヘッダー

<divclass="site-header"><header>… </header></div>

何らかのナビゲーション

<divclass="navigation"><nav><ulclass="…">… </ul></nav></div>

何らかのセクション

<divclass="block-name"><section>… </section></div>

何らかのアサイド

<divclass="block-name"><aside>… </aside></div>

ContentsのBlock

コンテンツ用のBlockの典型的なパターンは以下のようになります。

一般的なコンテンツのBlockの型

<divclass="block-name"><section><divclass="block-name__header"><!-- 見出しのコンポーネント（パターンA・B・C選択可能） --></div><divclass="block-name__body"><!-- このBlockの主たる情報（パターンA・B・C選択可能） --></div><divclass="block-name__footer"><!-- 詳細リンクボタンなどの設置（パターンA・B・C選択可能） --></div></section></div>

bodyタグ直下のBlock

また、これは以前、HTML PartsのBlockの説明で参考情報として書いたものですが、body直下から既にBlockが始まっていると考えると、全ては自己相似（フラクタル構造）でコードを捉えられます。

bodyタグ直下のコード例

<body><divclass="site"><!--この中にあるのは「サイト」の表示用データ--><divclass="site-header"><header>…</header></div><divclass="site-main"><main>…</main></div><divclass="site-footer"><footer>…</footer></div></div></body>

こういった内部分割は、必要に応じてインナー要素を差し込む事もあれば、主たる情報エリアを大きく左右に分割する事もあるでしょう。場合によってはheaderとfooterが不要であったり、footerのみが不要という事もありえます。
しかし、そのページで伝えたい事や意図した機能がある限り、主となるmainやbodyといった役割のものが無い。という事は考えにくいでしょう。

2 ・ Parts

Parts（パーツ）は中規模～小規模の要素です。

parts/のディレクトリで部品を管理します。
「HTML Parts」の定義によって、中部品（Module）、小部品（Component）、最小部品（Element）に細かく分類し、グローバルに再利用したい部品はそれぞれのディレクトリで管理します。

HTML Partsの定義をそのまま仕様するため、部品粒度と役割については、それぞれのリンク先で詳細な説明をご確認下さい。※考え方を含めてご覧になりたい場合は、遷移先の記事の先頭からご覧いただければと思います。

HCDCモデルにより、A・B・Cの3つのスタイリング方法を選択できます。

Partsのコード例

Moduleの例

意味付タグ無し

<divclass="module-name">…
</div>

意味付タグ有り

<divclass="module-name"><section>… </section></div>

Componentの例

見出し

<divclass="heading"><h2class="title">見出しのテキスト</h2></div>

リンクボタン

<aclass="link-btn"><iclas="icon"></i><spanclass="text">… </span></a>

Elementの例

タイトルとしてのテキスト

<spanclass="title">タイトルのテキスト</span>

テキスト

<spanclass="text">テキスト</span>

アイコン

<spanclass="icon"></span>

3 ・ Structure

Structure（ストラクチャ）は、Blockの中のPartsをまとめたり、Blockそのものを大きな範囲でレスポンシブ制御したり、ページのカラム分割や画面分断といったような、コーディングの都合で欲しくなる補助ボックス・構造です。structure/のディレクトリで部品を管理します。

制作時に使いたくなる概念としては、以下の4つが挙げられます。

Part　…　意味の伴う名前が与えられた構造体・部位
Divider　…　汎用的な仕切りや包括要素
Layout　…　内容物の位置を定めるだけの位置決め用のボックス
Grid　…　CSSグリッドシステムなどを利用する場合の分類

これらの用途を比喩するなら、弁当やオードブルの間仕切りです。
具材が混ざらないように仕切ったり、アルミカップで具材を配置するような感覚で使います。Structureで間仕切りした中に部品を入れることで、それぞれの領域同士の余白を部品に加える必要がなくなります。

小さな部品同士のこまかなスペーシングは必要になりますが、領域ごとの余白まで小さな部品に与えるとなると管理が複雑化します。大きな位置決めや幅指定などは"外の入れ物"でおこない、主要な部品はどこに置いても常に同じふるまいをするものとして管理できます。

また、これらは「絶対に使わなければならない」といった属性のものではなく、実際に頭によぎった時にすぐに物理化するための分類です。これ以外にもあるかもしれませんし、管理名称は他のものでも問題ありません。
必要に応じてディレクトリ化すればよく、規模に応じて効率がよい方法を採択してください。

HCDCモデルにより、A・B・Cの3つのスタイリング方法を選択できます。

1・Part（パート）

意味の伴う名前が与えられた構造体・部位です。
具体的には、Blockのヘッダー、Blockのボディ、Blockのフッター、アサイドといった意味を持つ構造体です。HTMLタグと同名の役割が欲しくなるため、命名の意味は予測しやすいでしょう。

Partの命名例

headerfooterbodymain
必要に応じて：relationsectionarticleaside等

Partのコード例

BlockやModuleなど、構造体の入るレベルの領域・部品内部にて、大きな区画分割に使います。
ヘッダーやフッターに該当するものが無くとも、中央部にあたる…__bodyを記述しておけば、いつでも上下（レンダリング結果としては上下とも限りませんが）を拡張できるようになります。

Block内部を部位で分割

<divclass="block-name"><divclass="block-name__header">… </div><divclass="block-name__body">… </div><divclass="block-name__footer">… </div></div>

2・Divider（ディバイダー）

汎用的な仕切りや包括要素です。
要素命名の時には抽象的な英単語を用いる事が多くなるものです。

Dividerの命名例

innerouterwrapperwrapcontainerblockboxcellitem

Dividerのコード例

BlockやModuleレベルの汎用的な構造体として使います。

インナーの設置

<divclass="block-name"><divclass="block-name__inner">…
    </div></div>

汎用コンテナからの各種ボックス配置

<divclass="block-name"><divclass="block-name__container"><divclass="block-name__row"><divclass="block-name__col">… </div><divclass="block-name__col">… </div></div></div></div>

outer（アウター）やwrap（ラップ）・wrapper（ラッパー）は、BEMを利用していると後から拡張しづらい（※ルールとして内部に向かってマークアップしていく概念のため）ですが、REMMの概念であれば「ルーツ（起源）の外側」という形でいつでも簡単に拡張できます。
※REMMは、今後の記事でも紹介する、BEMの亜流でOOCSSの概念と平行利用できる単語連結規則です

REMM記法によるインナーとアウター

<divclass="block_name--outer"><divclass="block_name"><divclass="block_name--inner">…
        </div></div></div>

3・Layout（レイアウト）

Block内部におけるカラム分割の要素や、定型の配置用ボックス、Fixedするためのラッパー、上下左右・中央といった、ものの割り付けや配置・配列を定めるためのボックスがこれに該当します。
言葉としてはサイト全体構造を指すのではなく、部品を対象とした言葉として使います。body直下のラッパーもBlockと捉えると結局は同じ意味になるため、「サイト全体の枠組みである」と意味を限定しなくても良いためです。

Layoutの命名例

位置を表す語句：topmiddlebottomleftcenterright
汎用語句：rowcolcontainerinnerouterwrapperwrapblockboxitem等

Layoutのガイド・詳細説明

この要素には、色や線などのデザイン再現に寄与するCSSプロパティを与えず、余白や行間などのホワイトスペース系の設定のみを許可する事で、狭義の意味でデザインに干渉しない「間仕切り」として使用します。

命名は他の定義のものと同じ単語を使いたくなることが出てきます。そこで、SMACSSなどのルールを踏襲し、プレフィックス（l-など）を付与して「機械から見れば別名」にして管理します（他のプレフィックスでも構いません）
これにより、同じ単語た使えるほか、HTMLコード上でもLayoutという間仕切りと、情報や機能をつくるための主力部品との影響の分離が把握しやすくなります。

Layoutのコード例

内部をStructureで区分け

<divclass="block-name"><section><divclass="l-block-name__top">… </div><divclass="l-block-name__middle">… </div><divclass="l-block-name__bottom">… </div></section></div>

ラッパーの拡張（※非BEM)

<divclass="l-block-name__wrapper"><divclass="block-name"><section>… </section></div></div>

以下は、body直下でLayout（位置）を喚起させる単語によって領域を仕切った例です。レスポンシブによって意味と実体が相違しても、少なくともコード上での序列は意識しやすくなり、大きな塊で動かしやすくなります。
※必要に応じてここまで拡張できる。という例であって、必ずこうしなければならないという事ではありません。

サイト全体のレイアウト（縦割り）

<body><divclass="site"><!--この中にあるのは「サイト」の表示用データ--><divclass="site-header"><header><divclass="l-site-header__top">… </div><!-- ページ最上の帯などを設置 --><divclass="l-site-header__middle">… </div><!--headerの主たる情報を設置--><divclass="l-site-header__bottom">… </div><!--ナビゲーションの設置など--></header></div><divclass="site-main"><main><divclass="l-site-main__top">… </div><!-- ページの表題を設置 --><divclass="l-site-main__middle">… </div><!-- ページの主たる情報を設置 --><divclass="l-site-main__bottom">… </div><!-- ページの関連情報を配置 --></main></div><divclass="site-footer"><footer><divclass="l-site-footer__top">… </div><!-- フッター共通のキャッチコピーなどを設置 --><divclass="l-site-footer__middle">… </div><!-- フッターの主たる情報を設置 --><divclass="l-site-footer__bottom">… </div><!-- ページ最下の帯などを設置 --></footer></div></div></body>

画面全体を大きく横に分割する場合は以下のようにできます。この時も、中央を意味する言葉を使っておくと、上下に拡張が必要になった場合もすぐに対応できます。

サイト全体のレイアウト（横割り）

<body><divclass="site"><!--この中にあるのは「サイト」の表示用データ--><divclass="l-site__middle"><!--以下の3つをCSSで横割り配置--><divclass="l-site__item">… </div><divclass="l-site__item">… </div><divclass="l-site__item">… </div></div></div></body>

上記の「縦割り」と「横割り」の二つの組み合わせで、432パターン以上のレイアウトが構築できる事を確認しています。

以下は「3×3パネル（≒聖杯レイアウト）」のネストでどれだけのレイアウトパターンがHTMLコードで作れるかを試したものです。左側で計27種類と、右側の内部ネストのパターン計16種類で、乗算すると少なくとも432パターンのレイアウトは可能であるという結果になりました。

※2000年頃～2010年前後までは、このようなレイアウトそのものがWebデザインの重要な要素のひとつとなっていましたが、今の時代はこれが有効に働くプロジェクトは限られるでしょう。

横割りは、同じ要領でBlock内部のレイアウトとしても働きます。

Block内部を左右に分断

<divclass="compare"><!--AとBの比較コンテンツ--><divclass="l-compare__middle"><divclass="l-compare__item"><!-- 領域A：カード状のBlockもしくはmoduleを設置--></div><divclass="l-compare__item"><!-- 領域B：カード状のBlockもしくはmoduleを設置--></div></div></div>

また、BlockやModule内部、もしくは外側で一定の幅で表示領域を抑え込みたい場合、それぞれの部品のインナーやアウターにMixinなどでプロパティを適用しても良いのですが、グローバルに再利用するLayout要素を差し込む事でも解決できます。

Block内部の幅を制御（背景はブラウザ幅一杯に広がる）

<divclass="site-header"><header><divclass="l-site-width"><!-- コンテンツ表示領域の幅押さえ -->…
        </div></header></div>

Block外側で幅を制御（背景ごと抑え込める）

<divclass="l-site-width"><!-- コンテンツ表示領域の幅押さえ --><divclass="block-name"><section>…
        </section></div></div>

Frame部とContents部で異なる幅が必要な場合は、命名を拡張するなどして対応できます。
l-width-frame , l-width-contents

4・Grid（グリッド）

近年ではCSSグリッドシステムを使う事は少ないかもしれませんが、ECサイトの商品一覧やフォトギャラリーのサムネイル一覧などのリピートコンテンツを作ったり、場合によっては大きなレイアウトを定めたりするかもしれません。
サイトのデザインによっては有効に働く（むしろ無いと作りにくい）ものもあるでしょう。

Gridの命名例

containerrowcolspan

Gridのコード例

CSSグリッドシステムを利用する場合は、恐らく何らかの外部CSSを使用する事が多くなると思いますので、ここでは割愛します。

4 ・ Utility

Utility（ユーティリティ）は、コーディング用の便利な役割で、単体で「主役」になることは少なく、コーディング都合の補助的な位置づけのものです。utility/のディレクトリで管理します。

制作時に使いたくなる概念としては、以下の3つが挙げられます。

Apend　…　特定の効果を付与するもの
State　…　状態を表すためのもの
ID (Identifier)　…　識別子として使用するもの

これらはStructure同様に「絶対に使わなければならない」といった属性のものではなく、また、足りない場合には自由に分類・追加してください。管理名もこれでなくとも何も問題ありません。
必要に応じてディレクトリ化すればよく、規模に応じて効率がよい方法を採択してください。

HCDCモデルにより、A・B・Cの3つのスタイリング方法を選択できます。

1・Apend（アペンド）

特定の効果を付与するものです。RSCSSのValiant（先頭に-付与）やHelper（先頭に_付与）に該当します。
テキストのアクセント、色指定や、上下左右の余白、display指定、position指定など、1つのセレクタに1つのプロパティを割り当て、目的のオブジェクトに付与することで目的の表示にします。

Apendの命名例

size-smsize-mdsize-lgmt-smmt-mdmt-lgpt-smpt-mdpt-lgtext-accent等
※mt = margin-top ／ mt = padding-top

2・State（ステート）

状態を表すためのもので、SMACSSのStateに該当(is-付与)します。
主にJavaScriptによって動的にclassを付け消しすることで、対象にCSSの効果を付与します。

Stateの命名例

汎用： activehoverfocusenabledisablehideshowonoff
SMACSS踏襲： is-activeis-hoveris-focusis-enableis-disableis-hideis-showis-onis-off

3・ID (Identifier)

識別子として使用するものです。HTMLのID属性の意味ではありません。
JavaScriptのトリガーやターゲットであることを示したり、特定の要素をCSSでセレクトするための文字列であったり、要素に対して静的に付与することで制作用の効果を得ようとするものです。
命名は、id属性に付与する事もあれば、class属性に付与する事もあるでしょう。

ID (Identifier)の命名例

nav_id-***article_id-***section_id-***等

元記事： CSS設計・Sassディレクトリ管理の標準化（CROCSS）
- 遷移元のセクション

クレジット・その他

Ultimate Coding
概要・前提事項

設計・考案／構築／記事投稿
- @croco_works - Twitter
設計パートナー／技術検証
- @wildwest_kazya - Twitter

この仕組みは、組織所属時に業務効率化のために構築したものであり、許可を得た上で設計者本人が個人活動として公開しています。商用の制作や開発には利用していただけますが、仕組みを販売したり媒体化するなどの、制作以外での商用化はご遠慮下さい。質問その他、何かあれば@croco_worksまでお声かけください。

データ分類の詳細説明

1 ・ Block

Blockのコード例

ContentsのBlock

bodyタグ直下のBlock

2 ・ Parts

Partsのコード例

Moduleの例

Componentの例

Elementの例

3 ・ Structure

1・Part（パート）

Partの命名例

Partのコード例

2・Divider（ディバイダー）

Dividerの命名例

Dividerのコード例

3・Layout（レイアウト）

Layoutの命名例

Layoutのガイド・詳細説明

Layoutのコード例

4・Grid（グリッド）

Gridの命名例

Gridのコード例

4 ・ Utility

1・Apend（アペンド）

Apendの命名例

2・State（ステート）

Stateの命名例

3・ID (Identifier)

ID (Identifier)の命名例

関連記事

クレジット・その他

Trending Articles