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パーツ」を管理する場所です。ここが最もよく触る箇所です。 さらにobjectの中には、” 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の画面サイズの時のみの指定）