FLOCSS勉強会 ( 2日目 )
経緯
↓前回の記事を参照
https://mikka-tech.hatenablog.com/entry/2022/03/17/041037
今回は2日目です。勉強会(個人戦)
FLOCSSの流れ
記述する前に
最初にカンプに手書きでクラスを書いていきました。まだ理解が浅いので後々結構変更しましたが、多分やった方がいい気がします。
作成手順
まずfoundationの準備
- reset.scss 追加
- color.scss 追加
- base.scss 追加
htmlにクラスを記述
- どこがlayout, component になりそうかあたりをつけておく
- htmlにlayoutクラスを記述
- htmlにcomponentクラスを記述
scss作成
- scssファイルを作り、逐次 style に @import
- scssファイルは ファイル名の前に _ (アンダースコア) を書く
- 最初に layout を記述して大まかな形を作る
- 基本的には project に記述する(?)
- font-size や margin など単一のプロパティのみを記述したい場合は utility に記述する
勉強後のFLOCSSの認識
- 記法はBEMで書く
- style は全て class で指定
- BLOCK_ELEMENT_ELEMENT は禁止
- l-nav などの left は見た目依存だからよくない。main-nav 等にすべき。セマンティックな命名（見た目ではなく、目的や役割に基づいた命名）
