LoginSignup
5
6

More than 5 years have passed since last update.

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

Posted at

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

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6