始めに

FLOCSSの形式でサイトの製作を行なった。
書き方で悩んだところや、導入するまでに行なったことを記載する

FLOCSSの学習参考

##環境構築

vscode
- DartJS Sass Compiler and Sass Watcher
  - Sass Bin Path を作成したプロジェクトのパスに変更
Dart sass

なぜLive Sass Compilerを利用しないのか？
Live Sass Compilerはdart sassの書き方に一部対応していないらしいため

$ npm init -y
$ npm i -D sass

setting.json

"dartsass.sassBinPath": "/path/to/node_modules/sass/sass.js"// パスを変更

scssフォルダを右クリックし、watchを押下

悩み: どの粒度でファイルを分割するのかがわからない
p-flow というクラス名をつけたら、projectフォルダ配下に _flow というファイルを作成するのか？
sectionタグの一つが基本project(p-hoge)ということでいいのか？

悩み: componentとprojectはどのように分けるのか？
componentは他でも使う時につけると記載をみたが、ほぼprojectになってしまう気がした

悩み: utilityクラスをどのように使うかよくわからない
marginやdipslayという命名で作ったが、3行くらいしか記載されていないファイルがいくつかある

悩み: font-familyは_base.scssに記載する形で良いのか？
_base.scssに記載した

悩み: js用のクラス名(js-)を使った場合どのファイルに記載することになるのか？
いや、js用のクラスなのであればそもそもcss書かないから問題ないな