フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

FLOCSSのComponent, Projectの個人的な区別

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)は難しいと思います。色々な記事を参考にして、自分なりの基準を持っておくことが大切だと思います。

[紹介元] CSSタグが付けられた新着投稿 – Qiita FLOCSSのComponent, Projectの個人的な区別

コメント

記事に戻る

コメントを残す