CSSフレームワークをつくろう！
FRONTEND CONFERENCE 2017

モンキーレンチ
キタジマタカシ ( @inc2734 )
- フリーランス
Web デザイナー/プログラマー
- 長崎
- WordPress プラグイン
MW WP Form、Smart Custom Fields
- WordPress テーマ
Habakiri、Mimizuku
- Sass/Stylus/CSSフレームワーク
Basis

① CSSフレームワークの方向性をきめる
② 使用するメタ言語をきめる
③ CSS設計/命名規則をきめる
④ JSまでカバーするのかしないのか問題
⑤ どこまでパッケージにふくめるか

① CSSフレームワークの方向性をきめる
② 使用するメタ言語をきめる
③ CSS設計/命名規則をきめる
④ JSまでカバーするのかしないのか問題
⑤ どこまでパッケージにふくめるか

① CSSフレームワークをつくるにいたった経緯
② CSSフレームワークをつくることによって
解決したかったこと
③ どういう対策をしたか
④ CSSフレームワークをつくったことによって
どうなったか

CSSフレームワークを
つくるにいたった経緯

・全く同じ部分
・少し違うけどほとんど同じ部分
・デザインは全然違うけど大枠としては似ている部分
そのような部分を抽出して使いまわせるように汎用化
CSSフレームワーク

CSSフレームワークをつくる
ことによって解決したかったこと

上書きつらい問題

自分のニーズにマッチした
CSSフレームワークをつくりたい!!

デザイナー
Web制作会社
さまざまな
デザインテイスト
コンポーネント
表現
プログラマー
システム会社
どのサイトにも「ボタン」はあるけど
デフォルトの装飾があってもそのまま
形もテイストも全然ちがうな
使えることないし打ち消すのストレスだなぁぁ
コーディング

デザイナー
Web制作会社
さまざまな
デザインテイスト
コンポーネント
表現
プログラマー
システム会社
装飾がない骨組みだけのCSSフレームワークがほしい !!
コーディング

ストレスを感じていたこと
1. 上書きつらい問題
2. PSDで「余白サイズをはかる」という作業
3. floatベースグリッドどうにかならんか問題
4. 「IE9・8でもある程度レイアウトたもってね∼」問題
5. 12分割グリッドだけでは…問題

どういう対策をしたか

解決したいこと 1
上書きつらい問題

コンポーネントの基本設計
• 使いもしない色のバリエーションはなし
• ホバー時のスタイルもなし
• フォントサイズなどコンポーネントが成立するために
なくても大丈夫なものも未指定

まだ足りない…

サイトのボタンデザインが統一されている場合
Basisのデフォルトのボタン
._c-btn
上書きしてそのサイトの
デフォルトのボタンデザインに
._c-btn
独自に拡張
独自に拡張
._c-btn--foo
._c-btn--bar

サイトのボタンデザインが統一されていない…
Basisのデフォルトのボタン
._c-btn
どれがデフォルトなんだ…
もはや modifier では不可能…

サイトのボタンデザインが統一されていない…
Basisのデフォルトのボタン
._c-btn
コンポーネントをわけたい
.c-primary-btn
.c-send-btn
.c-danger-btn
.c-caution-btn
.c-login-btn

FLOCSS
! foundation/ # normalize、ベーススタイル、ミックスイン等
• 本文レベル1
! layout/ # ヘッダー・フッター等レイアウト用スタイル
" object/＿
• 本文レベル2
! component/ # コンポーネント用のスタイル
! project/ # プロジェクト固有のスタイル
•
" 本文レベル3
utility/ # ヘルパー・調整用スタイル
• 本文レベル4
• 本文レベル 5

Basisは…
! core/ # Basisを構成するコア部分
# ! function/ # 関数
# ! mixin/ # ミックスイン
# " abstract/ # コンポーネントを構成するミックスイン
! foundation/ # normalize、ベーススタイル
! layout/＿
" object/＿
! component/ # コンポーネント用のスタイル
! project/＿
" utility/ # ヘルパー・調整用スタイル

Basisの持つclassがいらない案件の場合
• coreだけ@importすればベースのスタイルもコンポーネ
ントのスタイルも一切吐き出されず無駄が少ない
• abstractレイヤーのmixinを具象化して必要なコードを
付け足す形にすればオリジナルのコンポーネントをつ
くるのも簡単

abstractの具象化
.my-btn {
@include _btn((
border: null,
));
&--primary { … }
&--secondary { … }
&--block { … }
}

abstractの具象化
.c-send-btn {
@include _btn();
…
}
.c-caution-btn {
@include _btn();
…
}
.c-login-btn {
@include _btn();
…
}

解決したいこと 2
PSDで「余白サイズをはかる」
という作業

line-height
font-size
half-leading
half-leading

PSDで「余白サイズをはかる」という作業
• 正確にはかるためにはfont-sizeとline-heightから行間
が何pxになるか計算し、
• その行間分を引いて余白サイズを導き出さなければな
らない
• line-height自体も相対値で書くためには計算して導きだ
さなければならないのでめんどくさい
• そしてそれらの作業を全箇所でやらないといけない

line-heightも余白も勝手に
良い感じになってほしい !!!

• 一言でいうとline-heightと余白のサイズを統一し、倍
数で値を設定していくことでバランスを整える
• 例えば 12px、24px、36px、48px のような区切り
• それにあわせて文字サイズも倍数で設定
• ただ、日本語だと文字が大きくなりすぎたり、そもそ
もそんなデザインがいつもくるとは限らない

文字サイズを基準に勝手に計算させる！
@function _vertical-rhythm($font-size, $coefficient: 1) {
$between-lines : _strip-unit(_rem2px($_between-lines));
$base-line-height: _strip-unit(_rem2px($_base-line-height));
$base-font-size : _strip-unit(_rem2px($_base-font-size));
$font-size : _strip-unit($font-size);
$line-height: $font-size + ($between-lines * $coefficient);
@if ($line-height < $font-size + ($between-lines * 2)) {
@return _vertical-rhythm($font-size, ($coefficient + 1));
} @else {
@if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
@return $line-height - ($between-lines / 2);
}
@return $line-height;
}
}

文字サイズを基準に勝手に計算させる！
/* margin */
@include _margin-bottom(1);
/* padding */
@include _padding(.5);
/* 文字サイズとそれに応じた最適なline-height */
@include _font-size-line-height(16px);

いやいや、結局はからないんだったら
違う値になってない…？

解決したいこと 3
floatベースグリッド
どうにかならんか問題

Flexible box layout Module !!

Flexible Box Layout Module
• いわゆるflexbox
• clear不要
• 上付き、中央
え、下付き、左右均等割付、子要素の
高さ統一など、柔軟なレイアウトが、簡単なプロパティ
の組み合わせで可能

解決したいこと 4
「IE9・8でもある程度
レイアウトたもってね∼」問題

Flexible Box Layout Module
• IE10はautoprefixerを使えばそれなりにつかえる
• IE9以下は完全に未対応なのでflexboxは全くつかえない

I E 。。。

コンディショナルコメント
✕
display: inline-box , table

コンディショナルコメントでIE用CSSを読み込む
<!--[if lt IE 10]>
<link rel="stylesheet" href="node_modules/
sass-basis/dist/css/plugin/basis-ie9/basis-
ie9.min.css" />
<![endif]-->

display: inline-block, table で上書き
• display: flexの指定をIE9以下ではdisplay:inline-box, table
で上書き
• 中央
え、下
え、左右均等割付、逆順のレイアウトなど
は display: inline-block で上書きさせることで対応
• 子要素の高さ
え、カラムサイズの自動均一化などは
display: table で上書きさせることで対応
• flexboxの全てを再現することはできないが、対応可能範囲
をわかった上で使えばある程度再現できる

解決したいこと 5
12分割グリッドだけでは…問題

• 実装側が効率化のためにBootstrapを勝手に使っている
とデザイナーさんがグリッドシステムを意識せずにデザ
インしていることは普通にありえる
• もし意識してもらっていたとしてもコンテンツによって
は「そこだけは5カラムにしたい」みたいなことはあり
える
• 実務的にはグリッドの母数（Bootstrapなら12）が固定
されていないほうが応用がききやすい

母数が可変なグリッドシステムを
つくればええやん !!

Basisのグリッドシステム
<div class=“_c-row”>
<div class=“_c-row__col _c-row__col--1-4”>
</div>
</div>

Basisのグリッドシステム
<div class=“_c-row”>
<div class=“_c-row__col _c-row__col--1-4”>
実際のサイズ = カラムサイズ ÷ 行あたりのカラム数
</div>
この例の場合だと、1/4 = 25%
</div>

Basisを使ったことによって
どうなったか

• CSSフレームワークはそのサイトだけはなく色々なサイ
トで使いまわすものなので、どう設計すれば汎用的に
使いまわせるようになるのかを強く意識するようになっ
た
• そういう意識付けがされたことでCSSフレームワーク外
のCSSを書くときの効率も良くなった
• Sassをネストぐらいにしか使っていなかったけど、変
数やmixinをどう使えばもっと効率的になるのかも意識
できるようになった

コーディング作業が
楽しくなった !!

まとめ
• 既存のCSSフレームワークにしっくりきていないのであれば、どう
いうところにしっくりきていないのか、それを解決するにはどうし
たら良いのかを整理して、自分にぴったりはまるオリジナルのCSS
フレームワークをつくってみましょう
• 今回お話した施策はあくまで僕のニーズ・ワークフローに最適化さ
れたものです
• 最適解はみなさんのニーズ・ワークフローによって変わるはずです
• つくったらぜひ GitHub で公開して知見をシェアしてください。ス
ターつけます