flexbox-study

FlexBox の勉強をかねて LP を作る

補足というかメモ

FLOCSS（フロックス）という設計思想について

FLOCSS は、下記のように 3 つのレイヤー、及び３つの子レイヤーによって構成される。

・Foundation
・Layout
・Object
　　・Component
　　・Project
　　・Utility

それぞれのレイヤーの役割

各レイヤーの役割は以下の通り。

Foundation

Reset.css や Normalize.css などの リセット系 CSS 及び、要素セレクタの基本スタイル を定義。

Layout

ヘッダー、フッター、サイドバー、メインエリアのように、サイトで共通したコンテナー を定義。

Object

Web サイトの中で用いられるすべての ビジュアルパターン を総称して定義します。Object は、さらに３つのレイヤーに分けられる。

Component

ページを最低限の 機能単位で分割したモジュールのスタイルを定義。

Project

プロジェクト固有のパターン を定義する。Component とそれに該当しないものによって構成されるものがこれにあたる。

Utility

Component と Project レイヤーの Object のモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラス などを定義。

命名規則は MindBEMding

モジュールを Block、Element、Modifier にわけて考え、それぞれを.Block__Element--Modifier のようにつなげて記述。

接頭辞（プレフィクス）をつける

FLOCSS では、クラスがどのレイヤー属しているかによってそれぞれ接頭辞をつける。
これにより、クラスがどのような役割を持っているのかわかるため、「予測しやすく」 なる。
また、予測しやすいことは開発者にとっても意図がわかりやすいため 「拡張しやすい」。

レイヤーとそれに対応する接頭辞は下記の通り。

Component : .c-
Project : .p-
Utility : .u-
さらに、状態を表すクラスの接頭辞として.is-を使う。

Parcel の起動ポート番号について

起動コマンドは npm start

# ここにアクセスで確認できる
locahost:3000