どゆこと？
簡単に言えばcomponentがクラスでprojectがインスタンスです。
componentはそれ自体が色情報や幅情報などは__もたず__、どんなものであるか__しか__定義しません。
一方で、projectは色情報や幅情報を__もつ__し、どんなものであるか__も__定義することがあります。
で、なにがスッキリするって？
オブジェクト指向に当てはめて考える
例えばc-buttonみたいなcomponentを定義したとしたら、projectと併用される場合、
<span class="c-button p-ArticleForm__button">記事投稿</span>
<span class="c-button p-CommentForm__button">コメント送信</span>
みたいに記事の投稿ボタン、コメントの送信ボタンのclassを書くときに使うと思います。
これをオブジェクトっぽく扱うと、
Buttonクラス(※componentに相当)があったとして、
Button.new(name: 'article', width: '100px', backgroud-color: 'black')
※projectに相当
Button.new(name: 'comment', width: '50px', backgroud-color: 'blue')
※projectに相当
みたいな感じです。
これをCSSで書くとこんな感じになる。
.c-button{
display: block;
border-radius: 10px;
}
.p-ArticleForm__button{
width: 100px;
background-color: black;
}
.p-CommentForm__button{
width: 50px;
background-color: blue;
}
以上、オブジェクト指向にあてはめるとcomponentとprojectの違いがスッキリするよって話でした。
余談
初めはprojectだけを使うと割り切るくらいのほうがとっつきはよくなります。
そんでそのときに心がけといたほうがいいのは命名の仕方で、
<span class="c-button p-ArticleForm__button">記事投稿</span>
みたく、 p-Block__elementのelement部分がcomponentの名前にそのままできるようにしておくと、リファクタリング時にcomponentとして切り出すときに楽です。
ていうか切り出しが楽ってよりもelementの命名に迷わなくなりますね。
Blockの命名についてはこちらが非常に役に立ちました。感謝。
https://necomesi.jp/blog/tsmd/posts/152
あと、FLOCSSの創始者が書いた電子書籍あるんでこれ絶対読んだほうがいい。
https://booth.pm/ja/items/1033385