FLOCSSで初めてコーディングした際の流れ等

始めに

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

FLOCSSの学習参考

• 【Dart Sass対応】LPをつくって学ぶSass×FLOCSS
• CSS設計手法「FLOCSS」を適用して出てきた疑問を自分なりに考えて進めた結果と得た知見と失敗と
• [CSS設計] 私のためのFLOCSSまとめ
• FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話
• Sassファイルの管理方法。ディレクトリ構造（フォルダ・ファイル構成）
  

##環境構築

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

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

パーシャルファイルを保存した時もstyle.cssが更新されるようにする。

参考: https://yumegori.com/vscode-dart-sass-setting#chapter-4

$ 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書かないから問題ないな