「柴犬でもわかるFLOCSS」の内容復習

こんにちは。今日は先週の続きで「柴犬でもわかるFLOCSS」の復習記事を書いていこうと思います！

（今週は忙しくてブログ書くの水曜日になってしまいました(^^;）

先週はレイヤーの種類を書いて終わっていたので今日はその内容を書いていきます。

レイヤーの種類

前回の復習になりますが、FLOCSSではレイヤーは5種類に分けることが出来ます。

1. Foundation
2. Layout
3. Object/Component
4. Object/Project
5. Object/Utility

大まかにFoundation、Layout、Objectで構成され、そしてObjectの子レイヤーであるComponent、Project、Utilityで構成されます。

では以下より各レイヤーの内容について書いていきます。

Foundationレイヤー

ブラウザのデフォルトスタイルの初期化（reset.css）やプロジェクトにおける基本的なスタイルを定義します。ページの下地としての全体の背景や基本的なタイポグラフィなどが該当します。

Sassなどを使用している場合は変数やMixinのコードも定義してもいいみたいです！

foundationフォルダ内のファイル例

• base.css
• mixin.css
• reset.css
• variables.css

Layoutレイヤー

ページを構成するヘッダー、メインのコンテンツエリア、サイドバー、フッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。

この本より古い「CSS設計の教科書」で筆者はLayoutレイヤーはIDセレクタを使うことを推奨していましたが、今の考えではクラス名を推奨しているようです。

書き方は接頭辞にL、ハイフンを付けて

.l-header

といった感じで書きます。

Layoutレイヤーにどこまでcssをかくか悩ましいですがレイアウトのスタイル（幅や余白など）はLayoutレイヤーに書いて、装飾などは違うクラス名に指定してみてもいいかもしれません＾＾

layoutフォルダ内のファイル名例

• contents.css
• footer.css
• header.css
• grid.css
• inner.css

Objectレイヤー

Objectはプロジェクトにおける繰り返されるビジュアルパターンを定義します。

Component

汎用性が高く、再利用できる汎用的なモジュールを定義します。（フォームやボタンなど）

書き方は接頭辞にC、ハイフンを付けて

.c-button

といった感じで書きます。

componentフォルダ内のファイル名例

• button.css
• input.css
• icon.css

Project

プロジェクト固有のパターンを定義します。（例えば記事一覧、画像ギャラリーなど）

書き方は接頭辞にP、ハイフンを付けて

.p-card

といった感じで書きます。

projectフォルダ内のファイル名例

• article.css
• card.css
• list.css

Utility

componentとprojectで解決することが難しいわずかなスタイル調整のためのクラスなどを定義します。

例として

.u-dib
{
　display: inline-block;
}
.u-di
{
　display: inline;
}
.u-db
{
　display: block;
}

のような感じですね。

また、マージンなどの余白をあらかじめ指定するのにも使えます。

では、時間がきたので今日はここまで〜〜