FLOCSSでの設計で大きなポイントとなるのが、ComponentとProjectの区別だと思います。この2つの違いは、主にそれ単体で文脈上意味を持っているかどうかだと思います。
意味を持っているとは
例えば、記事一覧を作るとします。
<section>
<h2 class="c-text--large p-title">記事一覧</h2>
<div class="p-articles">
<article class="p-article">
<h3 class="c-text--medium p-article__title">記事タイトル</h3>
<p class="c-text p-article__content">本文の一部</p>
</article>
<article class="p-article">
<h3 class="c-text--medium p-article__title">記事タイトル</h3>
<p class="c-text p-article__content">本文の一部</p>
</article>
<article class="p-article">
<h3 class="c-text--medium p-article__title">記事タイトル</h3>
<p class="c-text p-article__content">本文の一部</p>
</article>
</div>
</section>
ここで、.c-text
は基礎的なスタイルを持った単なるテキストです。これ自体はページ上特に意味を持っていません(汎用的)。
一方、.p-article__content
は記事の内容という意味を持っています。Componentという土台に具体的な意味とスタイルを付与するのがProjectだと思います。
少し機械的に判別する
Componentは最小単位なので、他のComponentを含んではいけません。言い換えれば、複数のComponentで構成されるものはProjectにするべきでしょう。
Projectは複数のComponentを配置するもの、くらいの認識でも良いかと思います。
おわりに
FLOCSS(というよりCSS)は難しいと思います。色々な記事を参考にして、自分なりの基準を持っておくことが大切だと思います。