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

こんにちは。

今日は理解を深めるために、読んでいる本の要点をまとめていこうと思います。

題名は「柴犬でもわかるFLOCSS」で、FLOCSSというCSS設計手法を作った谷 拓樹さんの著書です。

ガッツリ内容を書くわけではないのでご了承くださいm(_ _)m

ではさっそく書いていきますー！

FLOCSSの命名規則

まず、CSS設計手法の種類について書くとBEM、OOCSS、SMACSS、そして最後にFLOCSSです。

FLOCSSの命名規則は、その中のBEMのルールに基づいています。

Block、Element、Modifierという構造で作られており、それぞれ頭文字をとったのがBEMというわけですね＾＾

• blockはその領域の名前
• elementはblockを構成する要素
• modifierはblockまたはelementのバリエーション違いの要素

書き方は以下の通りです。

BlockとElementの間はアンダースコア2つ、ElementとModifierの間はハイフン2つです。

言葉だけではわかりづらいので実際の例をあげると、

        <h2 class="p-project__heading--border">タイトル</h2>

こんな感じです！

基本原則（レイヤーの種類）

5種類に分かれています。

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

Foundation、Layout、Objectで構成されます。

そしてObjectを細かく分けるとComponent、Project、Utilityで構成されます。

時間がなくなったので各レイヤーの内容はまた来週書こうと思います！

では今日はここまで〜〜