FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）

この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の