こんにちは、インターンのさこです。社内で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で編集する。 | |||||||
8 Vscodeにツールを入れましょう
事前にVSCodeに下記のツールを入れましょう。（Gitを利用していても、VSコード上で、コンパイルできる様です。）
Live Sass Compiler、Sass
9 ディレクトリと空ファイルの作成
★基本的にはCSSはSassで記載していきます。 図のように、ディレクトリとファイルを先に作成しましょう。
【補足】
空ファイルのままCtrl+Sで Successと表示が出る
→ コンパイル後の #style.cssが作成される。
header 等、CSSを読み込む箇所に、style.cssを
指定しましょう。(フォルダ指定階層注意)
各ファイルで作成したscssは、#style.css に集約されます。
ディレクトリとファイルが作成出来たら、中身を書いていきましょう。
★覚書が発生しましたら、随時補足していきます。★
関連記事紹介
コメント