Kawakami-Portfolio

FLOCSS は、CSSを「どこに何を書くか」で整理するための設計ルールです。
「CSSを役割ごとに整理して、保守しやすくする設計」が FLOCSS の目的です。
後から修正すると、

• どこに影響するかわからない
• 同じスタイルが増殖する
• class名がカオスになる
• という“CSSあるある”が発生します。

FLOCSSはこれを防ぐための「整理術」です。

FLOCSSの全体像

• foundation
• layout
• object
  • component
  • project
  • utility

layoutに入れるもの

サイト全体の共通ルール
リセットCSS・bodyの基本設定・フォント・色変数。共通の基本スタイル
イメージ的になこんな感じです。

• _mixins.scss（メディアクエリーなど）
• _reset.scss
• _font.scss（フォントファミリー・フォント色）
• _variables.scss（フォントファミリー・フォント色）

objectに入れるもの

「実際のUIパーツ」を管理する場所です。ここが番よく触る箇所です。 さらにojectの中には、component・project・utilities に分類されます。

Component

小さく再利用できるUIです。 どのページでも使えるものをここに分類します。

• _c-card.scss
• _c-title.scss
• _l-inner.scss

project

ページ固有の大きめUIです。ページ依存が大きいものをここに分類します。

• _p-hero.scss
• _p-news-list.scss
• _p-contact-form.scss

utilities

微調整用

• _u-mt20.scss（marginの指定）
• _u-sp-only.scss（spの画面サイズの時のみの指定）