マークアップ言語とは何か
webページの構造(見出しとか段落とか)を決めているのはHTMLという言語です。
一方でwebページのレイアウト(色とか大きさとか)を決めているのはCSSと呼ばれる言語です。
CSSはカスケーディングスタイルシートの略で、単にスタイルシートと言われたりします。
因みにプログラミング学習の最初にHTMLとCSSついて学ぶことが多いですが、この2言語は他の言語と異なりマークアップ言語と呼ばれます。
マークアップ言語は学習難易度が低く、マークアップエンジニアは一般的に低単価であることが多いです。
CSSとは何か
そのCSSですが、エラーで動作しなくなるということが基本的に無く、間違えて書くと単純に間違えたレイアウトが画面上に表示されます。
他のプログラミング言語で間違えた書き方をすると、画面が真っ白になったり謎の英文エラーがログファイルに書かれるのですが(初学者はこのエラーに気づかなかったり、何が書かれているのか分からなかったりする)、CSSはとにかく表示はされるので、取っ付き易いという考え方があります。
一方で、全くエラーが出ないとどこが間違えているのか当たりが付けにくく、経験者であっても解決に苦労する場合があります。
またCSSは書き方の自由度が非常に高く、書く人によって如何様にも書けてしまうというのが学習難易度が低いと言われる所以でもあります。
CSS設計とは何か
趣味で個人開発をするのであれば全く問題ないのですが、複数人で特に長期的に使用される規模が大きいシステムを作成しようとすると、人によって自由に書けるというのは大きなデメリットになります。
そこで自由度は下げつつもメンテナンスや作業効率を高めるために用いられるルールがCSS設計になります。
そのCSS設計には幾つかの手法があり、それぞれのプロジェクト毎に適した方式が用いられます。
代表的なものにはOOCSS、BEM、SMACSS、FLOCSSがあります。
FLOCSSとは何か
大分前置きが長くなり、ようやくタイトルのFLOCSS(フロックス)が出てきました。笑
FLOCSSはサイバーエージェントで働く、たにひろきさん(@hiloki)という日本人の方が考案した設計手法になります。
先に挙げたOOCSS、BEM、SMACSSの良いとこ取りをしたものになっています。
FLOCSSという言葉自体は、構造の支柱になるFoundation、Layout、Object と CSS を組み合わせた造語になっています。
FLOCSSのF、Lについて
それではこのサイトを参考にそれぞれの要素についてみていきます。
まず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の違いが分からずゴチャゴチャすることがあるので気を付けたい部分です。
この記事を参考に詳細を見ていきます。
まずは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設計は絶対的なルールではないので、そのプロジェクト毎に正しくコミュニケーションを取り、柔軟に対応することが大切だと思います。
コメント