FLOCCS／Sass(SCSS)の利用について

更新日：2024年6月19日
公開日：2023年6月5日

未分類

こんにちは、インターンのさこです。社内でFLOCCSの導入を進めることになりましたので、覚書として記載いたしました。これから先輩方のサポートをいただきつつ、無事導入成功できると良いです。

1 　FLOCSSを採用していくための参考サイト

Youtube参考動画　https://www.youtube.com/watch?v=VrzUDGLlZ2w
公式ドキュメント GitHub – hiloki/flocss: CSS organization methodology.
参考ページ Sassとは？ Sassの基本について | UX MILK
参考ページ【CSS設計】FLOCSS(フロックス)で保守性の高い記述を極める！ – 株式会社TANE-be｜大阪・京都にあるWebサイト制作
CSSコンパイル css2sass | Convert CSS to SASS / SCSS code
VsCodeでコンパイル VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】 (miya-system-works.com)

2 　良いとされているCSS記述

　予測しやすい単純すぎない・・・・期待通りにふるまうか
　再利用しやすい使いまわせるか・・・抽象的で機能ごとに分離されている・わざわざ書き直す必要がない。
　保守しやすいコメントを残す・・・新しいルールを追加・更新する際に、既存のルールのリファクタリングを必要としないことが大事
　拡張しやすいルールを決める・・・サイトの規模が大きく複雑になっても、拡張しやすいようになっていることが大事

3　FLOCCS以外のＣＳＳの書き方の特徴

OOCSS—–場所に依存しない書き方（#header.logo #footer.logo　といった書き方ではなく、logo やsmall-logo
といったように、汎用性を持たせた命名にする。

SMACCS—-パターンを抽出しやすくすくするために、カテゴリを用意している。ちらかった物を片付けるためには、何かしらのカテゴリに分類したケースを用意して、条件に合うものをケースに入れていくのが容易。

カテゴリ：
　Base,–reset.css　normalize.css　htmlやBodyにて定義するだろう全体の背景や、FontFamily、リンクの色など
　Layout,–レイアウトに関するもの（接頭辞l-xxxを推奨）
　Module, –レイアウトのパターンを除いた、ページを構成するほぼすべて　（接頭辞は特に推奨していない。）
　State,—JavaScriptによる制御などによって切り替わる状態を表すルールが該当。　要素を一時的に隠すための　　　「display:none」を適用させるための「.is-hidden」やエラー表示他の為の「is-error」といったもの。
　Theme—-テーマを切り替えたりするような機能を求められる場合のcss。

BEM——-Block,Element,Modifierの略　この3つに分類して記載する。命名の書き方に特徴がある。エレメントは　Blockと親子関係にあるので、記号も下がっている状態のアンダースコアで書く。「XXX__YYYY 」。Modifire は、ブロックまたはエレメントのバリエーションの違いとして対等の関係ということで、希望は中央に直線のハイフンを使う「XXX—YYYY」

MCSS——マルチレイヤーCSSのこと。　
　Fundation、–reset.css　normalize.css　htmlやBodyにて定義するだろう全体の背景や、FontFamily、リンクの色　など
　Base、—レイアウトのパターンを除いた、ページを構成するほぼすべて
　Project、—-Baseレイヤーよりも具体的にページを構成する要素。
　Cosmetic—スタイル調整のための便利クラス

FLOCCS—-上記のいいとこどり

4 　FLOCCSとは Foundation,Layout,Objectの頭文字をとったCSSです。

Objectの配下に、Component、Project、Utilityが入ります。

CSSを用途毎に分けて記述します。具体的には、8で案内します。

5 　用途：ざっくり

Foundation ベースとなるCSSやリセットCSSなど。

Layout 　　ヘッダーやフッター、共通で使用するレイアウト部分のCSS。

Object

　∟Component 共通で使用したいパーツ部分のCSS。

　∟Project そのページのみで使用する部分のCSS。

　∟Utility わずかなスタイル調整のCSS。

6　用途：詳細

7　BEMも併せて導入できると直良しです。

Blocks-Elements-Modifiersの略で、簡単にいうと親のブロック要素を引き継いでclass名を書くようなイメージになります。　※以下の図は、冒頭のYoububeの画像をお借りしています。

Block	大枠となるブロック要素（sectionなど）	BlockとElementは__で区切る
Element	Block中の要素（section中のdivなど）	Element以下のclass名は-で区切る
Modifier	BlockやElementのスタイル（見た目や状態など）		Modifier（色の変化や微妙にスタイルを変更したいスタイル）は- -で区切る
	パターンを記述したい場合にmadhifireで編集する。