将克10707900※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの?」という悩みを感じたことがあるでしょう。簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。人生何事も、ある程度制約があったほうがやりやすいものです。そんなわけで今日はCSSの設計について考えてみましょう。目次どんな設計があるの?F、L、O、Uの4つに分けようFoundationLayoutObjectUtilityFLOU設計のメリットは?レイアウトが劇的に楽CSSの見通しが良くなるFLOUで書くときのポイントは?まとめどんな設計があるの?CSS設計について調べてみると、OOCSSだとかSMACSSだとかFLOCSSだとか、いろいろな設計思想があることがわかります。FLOCSSFLOCSSを例に見てみましょう。概観としては、FoundationLayoutObjectの三つがあって、さらにObjectの中に、ComponentProjectUtilityがあり、これらにCSSを分類して書くという設計用となっています。全体として管理のしやすいソースコードが出来上がるというメリットを得られます。いえ、「ハイハイ、これに従って書けばいいのね」と書き始めたのも束の間、ほとんどの人は思うことでしょう。多くのWebサイト制作では、FLOCSSのポテンシャルを生かしきれずに、そのメリットがなんだかよくわからないままCSSを書いていくことになってしまいがちです。大規模なプロジェクトならまだしも、ページ数の知れているWebサイトなんかではここまで巨大な設計図を引かなくても、うまいこと組み立てられそうですよね。いうことで、FLOCSSのいいところどりをした、よりスリムな設計「FLOU」を考えてみることにしましょう。F、L、O、Uの4つに分けよう基本のアーキテクチャとしては、Foundation、Layout、Object、Utilityの4つに分けましょう。こんな組み方にしたいとき、それぞれの役割は、図にするとこのようになります。(分かりやすくするために一部簡略化しています。)F、L、O、U、の4つが、Webページに必要な要素を過不足なく担当できているのがわかると思います。具体的なコーディングルールは、下記のような感じです。center;}Layoutにパーツの配置の役割を持たせるのは、「SMACSS」の思想を取り入れているイメージですね。}FLOCSSではUtilityクラスはObjectの中の一つとして扱われますが、空きの調整などは基本的にUtilityに任せるルールにし、Objectと同粒度のクラスとしてガンガン使っていきましょう。この設計を、F、L、O、Uの頭文字をとって、ここでは便宜的にFLOUと呼ぶことにします。classの命名ルールについては今回は触れませんが、FLOUの設計はMindBEMdingの記法と相性が良いので、こちらも適宜取り入れてみてください。FLOU設計のメリットは?さて、このFLOUの設計を使うとどんなハッピーなことがあるのでしょうか。レイアウトが劇的に楽まず言えるのが、「モジュールの配置に関していちいちCSSを考える必要がなくなる」ということです。Layoutに適切なクラスを用意しておくことによって、モジュール(Object)たちを柔軟に、かつスピーディーに配置していくことが可能になります。上記のflexboxを使ったLayoutクラスを駆使すれば、下記のように柔軟にモジュールを配置することができます。CodePen.ここで使っている.l-justify-leftなどのクラスは、子要素に依存しないレイアウトのクラスとなるので、どんなモジュールに対しても使い回すことができます。(依存を完全に0にしているわけではありませんが。)レイアウトだけを担当するクラスを用意しておくというのは、Bootstrapなんかと同じ発想ですね。tabel-cell;などを駆使したレイアウトのクラスを用意しておくだけで、マークアップコストが劇的に下がります。}のように、ラッパーの幅や高さを指定したりするLayoutクラスを用意しておくのも強力ですね。このように、レイアウトに関する記述をLayoutクラスとして切り出し、使い回すことで、Object内で定義するモジュールを柔軟に配置することができるようになります。CSSの見通しが良くなるFLOUを使う二つ目の利点として、「ファイル全体の見通しが良くなる」というものがあります。bold;}として、各モジュールにhtml上で.u-mt20を付与する方が、全体の見通しが良くなります。ここでは、単にそれぞれのモジュールに対する記述が減ったので見やすくなったということに加えてそれぞれのモジュールにとって本質的でない記述が減ったということも重要です。20px;は他のモジュールとの関係を定義するのに必要なだけであって、それぞれのモジュールには直接的には関係がない記述ですよね。このように、モジュール自体が他のモジュールとの関係に関するプロパティを持っていると、想定してなかったモジュールの組み合わせによって、「上の空きが大きすぎる」や「横並びになってくれない」などの不具合が生じかねません。配置に関してはLayoutクラスの変更で対応し、モジュール間の空きをなど調整したい場合はUtilityクラスを変更すればよいということになるので、仕様の変更に強くなります。オブジェクトの修正でない、例えばレイアウトの変更や、数px単位の微妙な空き調整なんかは、結局html上でのクラスの付け替え作業になるので、他のページへの影響をケアする必要がなくなるというのも嬉しいところです。FLOUで書くときのポイントは?FLOUでは、どの粒度でモジュールを切り出していくのかがポイントになってきます。理想的な切り出し方は、できるだけ小さい単位で切り出すしかし、常にセットで使うものに関しては一つのモジュールにまとめるというところです。こんなパーツを作るとします。この場合は、フォームとボタンをセットでモジュールとして切り出すのでなく、別々で切り出す方が良いでしょう。新規の「フォームとボタンを縦並びのモジュール」をCSSファイルに追加するということになりますが、別々で切り出していれば、html上で、子要素を横並びにするLayoutクラスから子要素を縦並びにするLayoutクラスに変更するという対応だけで済み、モジュールのパターン(今回で言う「フォーム」と「ボタン」)をCSS上で増やすことなくデザインが実現できるからです。このように、モジュールはできるだけ小さい単位で管理し、配置に関してはLayoutクラスとUtilityクラスに任せることで、CSSの肥大化を抑えることができるのです。いえ、もちろん「このパーツはどんな場面でもセットで使う」と言い切れるものに関しては、セットで管理するのがベターでしょう。WebNAUTではトップページや各カテゴリーページなどで使われている記事カードのモジュールのCSSは、一つのセットとして管理しています。カード内の要素は個別に切り出して使うことはないと考えられるトップページ一覧の記事カードのデザインが変わるときは、他のページの記事カードのデザインが変わるときでもあると考えられるというのが、その理由です。まとめCSSの設計に関しては、SMACSSやFLOCSSなどのオブジェクト指向の設計に従うことで、メンテナンス性に優れたコードを書くことができます。どの粒度でオブジェクトを切り出すのか、またオブジェクト以外のクラスはどう扱うかなどはサイトの特性によってまちまちなので、「どんなサイトにでも使える万能な設計手法」というものは存在しません。エンジニア/ディレクターコードを書きながらディレクションしてる人です。小四のときに『モチモチの木』を題材にした切り絵が市の美術館に展示されたことが唯一の自慢。More221shareTechnologyデザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。更新中!ビーワークスの多様な実績をぜひご覧ください。Inc.の登録商標または商標です。Inc.の登録商標または商標です。その他、本サイトに記載されている会社名・商品名は、各社の商標または登録商標です。reserved株式会社ビーワークスの運営する情報メディア。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。企業サイトへお問い合わせ。