WNT-Technology

Technology

FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話

エンジニアA

※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。

Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。

一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。
人生何事も、ある程度制約があったほうがやりやすいものです。

そんなわけで今日はCSSの設計について考えてみましょう。

どんな設計があるの？

CSS設計について調べてみると、OOCSSだとかSMACSSだとかFLOCSSだとか、いろいろな設計思想があることがわかります。

FLOCSSを例に見てみましょう。

概観としては、

Foundation
Layout
Object

の三つがあって、さらにObjectの中に、

Component
Project
Utility

があり、これらにCSSを分類して書くという設計用となっています。

FLOCSSの設計に従うことで、

CSSがコンポーネント化されるので使いまわしや修正に強くなり、
MindBEMdingのネーミングルールによってクラスの役割が明確化され、
全体として管理のしやすいソースコードが出来上がる

というメリットを得られます。

とはいえ、「ハイハイ、これに従って書けばいいのね」と書き始めたのも束の間、ほとんどの人は思うことでしょう。

「このパーツってComponentとProjectのどっちだ…」

「Utility使いまくらないと全然レイアウト実現できない…」

「Layoutに書くこと少なすぎ…」

多くのWebサイト制作では、FLOCSSのポテンシャルを生かしきれずに、そのメリットがなんだかよくわからないままCSSを書いていくことになってしまいがちです。

相当大規模なプロジェクトならまだしも、ページ数の知れているWebサイトなんかではここまで巨大な設計図を引かなくても、うまいこと組み立てられそうですよね。

ということで、FLOCSSのいいところどりをした、よりスリムな設計「FLOU」を考えてみることにしましょう。

F、L、O、Uの4つに分けよう

基本のアーキテクチャとしては、Foundation、Layout、Object、Utilityの4つに分けましょう。

例えばこんな組み方にしたいとき、

img_technology_20170403_1

それぞれの役割は、図にするとこのようになります。
（分かりやすくするために一部簡略化しています。）

img_technology_20170403_2

F、L、O、U、の4つが、Webページに必要な要素を過不足なく担当できているのがわかると思います。

具体的なコーディングルールは、下記のような感じです。

Foundation

リセットCSS、NormarizeCSSなどの、すべてのベースとなるCSS
基本的にコードは追加しない
foundation.scssに記述

foundation.scss
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  letter-spacing: 0.5px;
  font-weight: normal;
  font-size: 100%;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.8;
  word-wrap: break-word;
}

Layout

パーツの配置や、ラッパーとしての幅や高さなどを決定するクラス
接頭辞としてl-をつける
layout.scssに記述

layout.scss
.l-justify-left {
  display: flex;
  justify-content: flex-start;
}
.l-justify-right {
    display: flex;
    justify-content: flex-end;
}
.l-justify-center {
    display: flex;
    justify-content: center;
}

Layoutにパーツの配置の役割を持たせるのは、「SMACSS」の思想を取り入れているイメージですね。

Object

ページをまたいで使われる各種パーツを定義するクラス
そのパーツ内で常に同様の振る舞いをするものに関してのみスタイルを定義
object.scssに記述

object.scss
.boxA {
    width: 100px;
    height: 100px;
    color: #ff0000;
}
.boxB {
    width: 200px;
    height: 200px;
    color: #00ff00;
}

Utility

調整用のクラス
margin、padding、font-size、colorなどを付与するのに使用
他種類のパーツ間の空き調整や、パーツとして認められないような、自由な振る舞いをする要素に対してはこちらのクラスを使用
接頭辞としてu-をつける
utility.scssに記述

utility.scss
u-mt10 { margint-top: 10px; }
u-mt20 { margint-top: 20px; }
u-mt30 { margint-top: 30px; }

FLOCSSではUtilityクラスはObjectの中の一つとして扱われますが、空きの調整などは基本的にUtilityに任せるルールにし、Objectと同粒度のクラスとしてガンガン使っていきましょう。

この設計を、F、L、O、Uの頭文字をとって、ここでは便宜的にFLOUと呼ぶことにします。

なお、classの命名ルールについては今回は触れませんが、FLOUの設計はMindBEMdingの記法と相性が良いので、こちらも適宜取り入れてみてください。

FLOU設計のメリットは？

さて、このFLOUの設計を使うとどんなハッピーなことがあるのでしょうか。

レイアウトが劇的に楽

まず言えるのが、「モジュールの配置に関していちいちCSSを考える必要がなくなる」ということです。

Layoutに適切なクラスを用意しておくことによって、モジュール（Object）たちを柔軟に、かつスピーディーに配置していくことが可能になります。

例えば、上記のflexboxを使ったLayoutクラスを駆使すれば、下記のように柔軟にモジュールを配置することができます。

See the Pen <a href='https://codepen.io/bw-tokita/pen/LWrjBK/'>LWrjBK</a> by Masakatsu Tokita (<a href='http://codepen.io/bw-tokita'>@bw-tokita</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

ここで使っている.l-justify-leftなどのクラスは、子要素に依存しないレイアウトのクラスとなるので、どんなモジュールに対しても使い回すことができます。
（依存を完全に0にしているわけではありませんが。）

レイアウトだけを担当するクラスを用意しておくというのは、Bootstrapなんかと同じ発想ですね。

旧ブラウザ対応などでflexboxが使えない場合でも、float: left;やdisplay: tabel-cell;などを駆使したレイアウトのクラスを用意しておくだけで、マークアップコストが劇的に下がります。

また、配置のためのクラス以外にも、

layout.scss
.l-w25   { width: 25%;   }
.l-w50   { width: 50%;   }
.l-w100p { width: 100%;  }
.l-h100p { height: 100%; }

のように、ラッパーの幅や高さを指定したりするLayoutクラスを用意しておくのも強力ですね。

このように、レイアウトに関する記述をLayoutクラスとして切り出し、使い回すことで、Object内で定義するモジュールを柔軟に配置することができるようになります。

CSSの見通しが良くなる

FLOUを使う二つ目の利点として、「ファイル全体の見通しが良くなる」というものがあります。

例えば、

object.scss
.boxA {
    width: 100px;
    height: 100px;
    color: #ff0000;
    margin-top: 20px; /* ←これに注目 */
}
.boxB {
    width: 200px;
    height: 200px;
    color: #00ff00;
    margin-top: 20px; /* ←これに注目 */
}
.textA {
    color: #ff0000;
    font-weight: bold;
    margin-top: 20px; /* ←これに注目 */
}

とするよりは、

utility.scss
.u-mt20 {
    margin-top: 20px; /* ←これに注目 */
}

object.scss
.boxA {
    width: 100px;
    height: 100px;
    color: #ff0000;
}
.boxB {
    width: 200px;
    height: 200px;
    color: #00ff00;
}
.textA {
    color: #ff0000;
    font-weight: bold;
}