FLOCSSについて教えてください。

Question

・Componentとは、
CSS設計の教科書でいうとルールオブスリーが該当する場合に初めて検討するコンポーネント（オブジェクトともいう）
のことと考えてよいでしょうか？
つまり、WEBサイト上で何度も利用される部品のことでしょうか？

・Projectとは

プロジェクト固有のパターンでありとは、
プロジェクト固有とはサイト固有ということでしょうか？

Componentとの区別が難しいです。
Componentと、それに該当しない要素によって構成されるものとありますが、
ルールオブスリーに該当しない、再利用しない要素と、
ルールオブスリーが該当する場合に初めて検討するコンポーネント（オブジェクトともいう）と、再利用しない要素が一つのBEMでいうブロックに混在してしまっている、
ブロックがこれにあたるということでしょうか？

＊Foundationから Utilityまでが下記各SCSSにすべて記載してあるということでよろしいでしょうか？
具体例があるとわかりやすいのですが、実際のサイトサンプルなどありませんでしょうか？
フォルダでダウンロードできるとわかりやすくて助かります？
すべてのページに下記すべてを読み込ますのか、SASS未経験者には想像がつきにくいです。
POSTCSS、NEXTCSSでも同じようにすればよいのでしょうか？

├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _dialog.scss
│ ├── _grid.scss
│ └── _media.scss
├── project
│ ├── _articles.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ └── _profile.scss
└── utility
├── _align.scss
├── _clearfix.scss
├── _margin.scss
├── _position.scss
├── _size.scss
└── _text.scss

Answer 1

・Projectとは

プロジェクト固有のパターンでありとは、
プロジェクト固有とはサイト固有ということでしょうか？

メチャクチャ簡単に言うと

componentは他のサイトでも使うような部品です（ボタンとかフォームとか、ほかのサイトで使うからといってデザインは一緒である必要はありません、概念としてほかのサイトでも使用するという意味です）
projectは質問者様の仰る通り、自サイト固有のレイアウトだったり部品だったりするものです！

＊Foundationから Utilityまでが下記各SCSSにすべて記載してあるということでよろしいでしょうか？

具体例があるとわかりやすいのですが、実際のサイトサンプルなどありませんでしょうか？
フォルダでダウンロードできるとわかりやすくて助かります？

これはおそらく厳しいんじゃないでしょうか。
ブラウザはscssを読み込んでくれません。
FLOCCSSのようにいろんな部品に分けたscssは最終的には全て結合したりミニファイしたりしてcssに変換されます。
まれに生成されたcssの中にコメントが入ったものもありますが、そういうものを見つけることができたら参考にできるかもしれませんが、
そこに記述してあるcssは全てscssをcssに変換したものなので、詳細まで予測することは不可能だと思います。

また、最後の

POSTCSS、NEXTCSSでも同じようにすればよいのでしょうか？

に関しては、同じようにすればの解釈がわかりませんが、おそらく違うと思います、

そもそも
FLOCSSとPOSTCSSは別物です。
便利なツールや概念が世の中に生まれるのには理由があります。
既存の問題を解決しようとしているのです。
つまり、FLOCSSやPOSTCSSなどもcssに関する何かの問題を解決しようとしているのです。

今のcssはclass名が被っただけで簡単に破壊することが出来ます。
つまり誰かが（自分も）cssを追記していくとどこかでclass名が被った瞬間にレイアウトが崩れてしまうのです。
そういうcssの危険性をどうにかしようと世界中の皆さんが立ち上がってBEMやOOCSSの概念などを生み出しました。

FLOCSSはOOCSSやBEMの概念を取り入れたcssを書くための構成案です。
「こういうふうにcssを構成していったら、cssって便利に書けるよ、運用も保守も簡単だよ」という一案です。
FLOCSS公式のgithubにもこう書いてあります。

FLOCSS（フロックス）は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

POSTCSSはCSSのスタイルを変更するためのツールです。
「cssを書くときにこういうの不便だろ？オレが作ったツール使えば簡単に書けるよ！」っていうツールです。

FLOCSSはCSSを書くときにこういうふうにファイルを分けたりこういうふうに命名したほうがいいよという構成案、
POSTCSSはCSSを書くときに便利にしてくれるツールです。

なので２つは別物だと思います。

Comments

[退会済みユーザー]

＞＞＞
メチャクチャ簡単に言うと
componentは他のサイトでも使うような部品です
（ボタンとかフォームとか、ほかのサイトで使うからといってデザインは一緒である必要はありません、概念としてほかのサイトでも使用するという意味です）
projectは質問者様の仰る通り、自サイト固有のレイアウトだったり部品だったりするものです！

ありがとうございます。
componentはルールオブスリーで初めて作成をする、谷さんの言うコンポーネント、つまりパーツとして何度もそのサイト内で使いまわし、
かつ外のサイトにも使うような部品ということですね。

projectはそれに当たらない、使いまわしをしないパーツないしは使いまわすパーツに使いまわさないものが一つでも含まれている場合、
こちらにするということですね。

結構微妙なので、ここはアバウトでもよいかもしれないですね。

＞＞＞
これはおそらく厳しいんじゃないでしょうか。
ブラウザはscssを読み込んでくれません。
FLOCCSSのようにいろんな部品に分けたscssは最終的には全て結合したりミニファイしたりしてcssに変換されます。
まれに生成されたcssの中にコメントが入ったものもありますが、そういうものを見つけることができたら参考にできるかもしれませんが、
そこに記述してあるcssは全てscssをcssに変換したものなので、詳細まで予測することは不可能だと思います。

確かにコンパイル後のものしかふつうはアップロードしてないですね。
谷さん自身が、参考ファイルをアップロードしてくれれば一番ありがたいのですが。
どなたか詳しい方に自作のフォルダ群をアップロードしてして公開してほしいです。
これベースにしているというものを。