こんにちは、フロントエンドエンジニアの中村です。
「FLOCSSで始めるCSS設計」第5回目となります。
過去回は以下になりますので、まだ読まれていない方はぜひこちらもよろしくお願いします。
さて、今回はFLOCSSの”Foundation”レイヤーについてお送りいたします。
Foundationレイヤーとは
Hiroki tani氏（@hiloki）のドキュメントによると以下のように書かれています。
Foundation
Reset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルを定義します。 ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。
hiloki/flocss: CSS organization methodology.
「普段、CSSの最初の方に書いている記述」と言っても差し支えないでしょう。
FLOCSSのimportの順番も、Foundationレイヤーが1番最初です。
// ==========================================================================
// Foundation
// ==========================================================================
@import "foundation/_reset";
@import "foundation/_base";
// ==========================================================================
// Layout
// ==========================================================================
（略）
// ==========================================================================
// Object
// ==========================================================================
// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------
（略）
// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------
（略）
// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------
（略）
hiloki/flocss: CSS organization methodology.
“Foundation”という英単語
理解をすすめていくにあたり、英単語としての”foundation”を見てみましょう。
FLOCSSにおける意味合いとしては以下が適切です。
- 土台・基礎
- 化粧下地
（参考：foundation – weblio）
Foundationレイヤーにあてはめるならば以下の通りです。
- 土台・基礎→グリッドフレームワークなどの
@mixin。レイアウトにあたる要素 - 化粧下地→
classをつけてスタイル指定していない状態の基礎的なスタイリング。見た目にあたる要素
Foundationレイヤーに限らず、CSSは見た目の視点とレイアウトの視点を切り離して考えていきます。
それでは、それぞれを見ていきましょう。
見た目編：基礎的なスタイリング
Foundationレイヤーでは、以下のようなCSSを記述します。
- 要素そのものが持っておくべきスタイル
- デフォルトであると邪魔なのでなくしたいスタイル
- サイト全体で使用する色や数値などの変数
それぞれの具体的な例として以下のようなものがあります。
要素そのものが持っておくべきスタイル
a、a:hover、a:visited、a:activeなどのリンクタグ- 全体の下地になる
<body>のbackground font-familybox-sizing:border-box
etc.
特に最後のbox-sizing:border-boxは、ある程度組み上がって段階で「やっぱり全体にかけておこう」という変更ができません。
使用する前提があるにもかかわらずFoundationレイヤーで定義していない場合、毎回使用する際に記述が必要になり大変です。
よく使う項目ですので、覚えておきましょう。
デフォルトであると邪魔なのでなくしたいスタイル
ulやolのlist-style（<article>内のみでいいのでは？）<p>のmargin
etc.
目安として、ブラウザは「文書としての体裁を整えるスタイル」をデフォルトでかけていることを意識するといいでしょう。
例えば、<p>は段落を意味するので、段落間が見やすいようにmarginがついていたり、<ul>や<ol>などのリストの頭に黒丸や通し番号がついていたりします。
逆に、<div>なんかは文書としての体裁を整えるのに使う要素ではないのでブラウザによるデフォルトスタイルはついていません。
<p>のデフォルトのmarginは、文章中の段落として機能する場合は適切に機能しますが、コンポーネント作成中は都度marginを与えていくことが多いでしょう。
この部分は、Reset.cssやNormarize.cssあたりも組み合わせて調整していくことをお勧めいたします。
サイト全体で使用する色や数値などの変数
デザインにおいては、サイトで使う色をひとまとまりのパレットで管理していることが多いです。
それゆえ、多くの部分で統一した色が使われる傾向にあります。
例えば、当メディア「to-R Media」では水色の部分は全てコーポレートロゴのカラーコード#60abb9を使用しているため、Foudationレイヤーにて以下のような定義を行っています。
$color-tor-blue : #60abb9;これにより、「$color」くらいまでタイプするとエディタが予測候補を出してくれたりします。
エディタの機能を便利に使うという点でも、色なら$color-、フォントサイズなら$font-size-のように統一した接頭辞をつけることをおすすめします。ルールとすることでCSSの見通しもよくなります。
レイアウト編：グリッドフレームワークの運用
レイアウト手法の一つとして「グリッドレイアウト」というものがあります。
これは、縦横の方眼ブロックを組み合わせてコンテンツを配置していくものです。コンテンツ幅と余白が規則的に取り扱われるという性質があります。
予めその数値を事前に組み込んでおき、いちいち数値を入力しなくても単純な操作で取扱いやすいようにしたものがグリッドフレームワークです。
CSSでグリッドフレームワークを使う場合は大別して
- @mixinとして使用する
- classとして使用する
の２つの方法があります。
それぞれについて見ていきましょう。
@mixinとして使用されるグリッドフレームワーク
今回、一例として「Bourbon」というグリッドフレームワークライブラリを取り上げますが、これがデファクトスタンダードという意図は全くありません。
Bourbon
バーボン。多分、バーボンウイスキーのバーボン。
フランス語だと、ブルボンでしょうか。
@mixinライブラリなので、Sassでの運用が前提になります。@includeするだけで使えるたくさんの便利機能が収録されていて、その中にグリッドレイアウトに関する@mixinもあります。
例えば、以下のようなHTMLがあったとします。
CSSを以下のようにBourbonの@mixinを@includeしつつ記述します（scss形式で記述）。
.cat-house {
@include outer-container;
.white-cat { @include span-columns(6); }
.black-cat{ @include span-columns(6); }
}少しだけ説明をすると、以下のようなことを行っています。
- 要素を取り囲む
.cat-houseに@outer-container - 二つの要素
.white-cat、.black-catに@span-columns(6)
これらのscssファイルをコンパイルすると以下のようなCSSに変換されます。
.cat-house {
max-width: 64em;
margin-left: auto;
margin-right: auto;
}
.cat-house:after {
content: "";
display: table;
clear: both;
}
.white-cat {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
}
.black-cat {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
}言葉を用いて説明すると
@outer-containerを@includeした.cat-house- 横幅が指定され中央揃えになった
clearfixが自動でついた
@span-columns(6)を@includeした.white-cat、.black-cat- グリッドレイアウトに基づいて
width、margin-rightが与えられた
- グリッドレイアウトに基づいて
のようになります。
このように、@mixinで使用されるグリッドフレームワークはCSS内で完結させることができます。
classとして使用されるグリッドフレームワーク
例えば、『Bootstrap』というCSSフレームワークでは、以下のようなclassがたくさん用意されています。
col-sm-4 {
float: left;
width: 33.333333%;
}また、先述の「Bourbon」などの「@mixinで使用するグリッドフレームワーク」のComponent化を行うことにより、classとして使用するということもできます。
.c-grid {
@include outer-container;
}
.c-grid__cell--1 {
@include span-columns(1)
} このように、既存のグリッドフレームワークをComponent化したものは、別Projectでの使用することもできます。
以上のように、classとして使用されるグリッドフレームワークは、classを要素に与えるだけで、簡単にスタイル調整が可能です。
両者比較・まとめ
それぞれのメリット・デメリットをまとめると以下のようになります。
| @mixin | class | |
|---|---|---|
| メリット | HTMLが汚れない | CSSに触れなくていい |
| デメリット | Sassの学習コストがかかる | HTMLが汚れる |
（※HTMLがBootstrapやヘルパークラスにまみれてしまい、見通しが悪くなることを「HTMLが汚れる」という言葉で表しています。）
どちらが絶対的に勝っている、というものはなく、案件によって適切なものを選択していく必要があります。
ただし、グリッドフレームワークはレイアウトに用いるものである以上、それ単独でclassを持つべきです。以下の2つのどちらかを採用するべきでしょう。
- 「@mixinで使用するグリッドフレームワーク」のComponent化を行い、classによる運用をする。
.p-を用いて都度@mixinを記述し運用する。
この辺りは、cssを誰が触るのか、という点も考慮して決定するべきです。特に、@mixinが絡むとSassの知識がないことには始まりません。
classを与えるだけならば、ルールをドキュメント化しておけば最小限のHTML/CSSの知識で運用していける、というメリットもあります。
Foundationレイヤーのまとめ
- Foundationレイヤーでは、CSSを適用する前の基礎スタイリングや、mixinの準備を行う。
- ブラウザのデフォルトスタイルは、文書に関する要素にかかる
- グリッドフレームワークは、ComponentレイヤーかFoundationレイヤーで行う。どちらを使うかは運用次第。
いかがだったでしょうか。
肌感や運用で考える部分が多いですが、これらはCSSの最初の方に記述する内容ですので、困ったらいろんなサイトのCSSファイルの最初の方を覗いてみるとたくさんの発見があると思います（私もよくそうしています）
この連載に関するご意見やご感想がありましたら、ぜひtwitter(@nayucolony)まで！
気に入っていただけましたら、Facebookでのシェア、いいね、Tweet、はてブなど、是非ともお願い致します！
フロントエンドエンジニア積極採用中
株式会社トゥーアールでは現在フロントエンドエンジニア積極的に採用中です！
興味がある人は採用ページをチェック！！
