FLOCSSにおけるComponentとProjectの違いにつて超分かりやすく解説してみた

IT関連

マークアップ言語とは何か

webページの構造(見出しとか段落とか)を決めているのはHTMLという言語です。
一方でwebページのレイアウト(色とか大きさとか)を決めているのはCSSと呼ばれる言語です。
CSSはカスケーディングスタイルシートの略で、単にスタイルシートと言われたりします。
因みにプログラミング学習の最初にHTMLとCSSついて学ぶことが多いですが、この2言語は他の言語と異なりマークアップ言語と呼ばれます。
マークアップ言語は学習難易度が低く、マークアップエンジニアは一般的に低単価であることが多いです。

CSSとは何か

そのCSSですが、エラーで動作しなくなるということが基本的に無く、間違えて書くと単純に間違えたレイアウトが画面上に表示されます。
他のプログラミング言語で間違えた書き方をすると、画面が真っ白になったり謎の英文エラーがログファイルに書かれるのですが(初学者はこのエラーに気づかなかったり、何が書かれているのか分からなかったりする)、CSSはとにかく表示はされるので、取っ付き易いという考え方があります。
一方で、全くエラーが出ないとどこが間違えているのか当たりが付けにくく、経験者であっても解決に苦労する場合があります。
またCSSは書き方の自由度が非常に高く、書く人によって如何様にも書けてしまうというのが学習難易度が低いと言われる所以でもあります。

CSS設計とは何か

趣味で個人開発をするのであれば全く問題ないのですが、複数人で特に長期的に使用される規模が大きいシステムを作成しようとすると、人によって自由に書けるというのは大きなデメリットになります。
そこで自由度は下げつつもメンテナンスや作業効率を高めるために用いられるルールがCSS設計になります。
そのCSS設計には幾つかの手法があり、それぞれのプロジェクト毎に適した方式が用いられます。
代表的なものにはOOCSS、BEM、SMACSS、FLOCSSがあります。

フロントエンドの命名や設計の基本と自分の現在の設計 - Qiita
はじめに フロントエンドのコーディング時の命名や設計についてまとめました。 命名や設計についてあらかじめ知っておくと気をつける点や全体を意識してコーディングをおこなえるかと思います。 現在の自分自身の設計の仕方を参考に掲載します...

FLOCSSとは何か

大分前置きが長くなり、ようやくタイトルのFLOCSS(フロックス)が出てきました。笑
FLOCSSはサイバーエージェントで働く、たにひろきさん(@hiloki)という日本人の方が考案した設計手法になります。

hiloki/flocss
CSS organization methodology. . Contribute to hiloki/flocss development by creating an account on GitHub.

先に挙げたOOCSS、BEM、SMACSSの良いとこ取りをしたものになっています。
FLOCSSという言葉自体は、構造の支柱になるFoundation、Layout、Object と CSS を組み合わせた造語になっています。

公式githubより

FLOCSSのF、Lについて

それではこのサイトを参考にそれぞれの要素についてみていきます。

[CSS設計] 私のためのFLOCSSまとめ - Qiita
下記の記事を参考にFLOCSS設計のコーディングルールをまとめた FLOCSS生みの親による基本ルール hiloki/flocss: CSS organization methodology. ComponentとProjectの...

まずFoundationはサイト全体の基盤になるような部分を書きます。
reset.scss (ブラウザにデフォルトで用意されているスタイルを消して、キレイまっさらにします)
base.scss (まっさらにしたあとに、超基本的な文字サイズとかフォントとか全部に共通する部分を書きます)
variable.scss (何度も使いまわしする長さとかサイズを変数としてここでセッティングします)
mixin.scss (スマホでもタブレットでもPCでもどんなサイズの画面でも見られるようにせっていします)

(※いきなり.cssじゃなくて.scssのファイル名が出てきて驚いたかもしれませんが、SCSSはCSSを拡張して使いやすくしたものと覚えていてください)

次にLayoutです。
l-header.scss (ヘッダーと呼ばれる画面上部のタイトルとかメニューとかの部分)
l-main.scss (基本的に内容は全部ここに書く)
l-footer.scss (フッターと呼ばれる画面下部の利用規約とか著作権のやつとかはここ)

(※Foundation以外はLayoutのLを取って、l-という接頭辞を付けたファイル名にします)

FLOCSSのO(C、P、U)について

最後にObjectです。Objectは更にComponent、Project、Utilityの3つに分かれます。
ようやく掲題の大事なところですが、このComponentとProjectの違いが分からずゴチャゴチャすることがあるので気を付けたい部分です。

この記事を参考に詳細を見ていきます。

FLOCSSを使ったCSS設計での悩みどころと解決案 - Qiita
はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの...

まずはComponentからです。
c-button.scss (ボタン)
c-textbox.scss (テキストボックス)
c-icon.scss (アイコン)
c-img.scss (画像)
c-link.scss (リンク)

Componentはこれ以上細分化出来ない最小単位でレイアウトを決めていきます
このボタンは青色とか、このアイコンのサイズは幾つとかそういうものです。

次にProjectです。
p-card.scss (カード)
p-form.scss (フォーム)
p-modal.scss (モーダル)
p-table.scss (テーブル)
p-profile.scss (プロフィール)

ProjectはComponentの集まりで、再利用しやすい単位で分けて書いていきます。

最後にUtilityです。
u-margin.scss
u-position.scss
u-size.scss
u-text.scss

これは最後の微調整、便利道具です。
あくまでも補助で、乱用しない様にしましょう。

結局分かりづらい原因はなんなのか

ここまで書いてComponentとProjectが何故ごっちゃになるのかという問題点について気付いたのは、サイズ順とアルファベット順が微妙に交錯している部分にあるんじゃないかと思うのです。
それぞれのサイズ順を見るとFoundation > Layout > Object と順番に並んでいます。
アルファベット順でもFoundation → Layout → Objectになります。

次にObjectを見ていくと、
サイズ順 Project > Component > Utility
アルファベット順 Component → Project → Utility
と、微妙にややこしいことになっているのです。

公式のgithubやQiitaの解説記事も、大体サイズ順に話が進んでいきます。
しかし、ComponentとProjectの部分だけ何故かアルファベット順になってしまうため、ややこしくなるのではないかと思うのです。
また、エディタも親切にディレクトリをアルファベット順に並べてくれるので、書いていて「あれ、どっちだっけ」ってなるんじゃないかと思うのです。

ということで、FLOCSSはサイズ順じゃなくてFLOもCPUもそれぞれアルファベット順の話ですよって覚えとくと、いつか役に立つ日がくるかもしれません。

終わりに

もはや誰に向けて書いたのか分からない記事になりましたが、ここまで読んでいただいてありがとうございます。笑 ちなみにCSS設計は絶対的なルールではないので、そのプロジェクト毎に正しくコミュニケーションを取り、柔軟に対応することが大切だと思います。

この記事を読んだ後に買いたくなる本

コメント

タイトルとURLをコピーしました