罪のないCSSフレームワーク、なぜ私たちを苦しませたんですか？

はじめに

どうもこんにちは！ゆーみんと申します。
普段は hey／Coiney でデザインをやったりコードを書いたりします。

去年の今頃に、BASE さんの「Atomic Designを実現するコンポーネント指向開発のいま」という勉強会を登壇させていただきました。
あそこで CSS だけが得意な私が、このような話をしました。その中、

CSS フレームワークを捨てなさい。
それは「いつか使うかもしれない」の集合。

という言葉も放ちました。
実はその時伝えきれてなかったことがあります。

不向きだから、使いにくくなった

CSS フレームワーク、一切使えないわけではないです。
ただ大半のプロジェクト、実は CSS フレームワークに不向きな場合があるだけです。

不向きっていうのは？

CSS の書き方から話しましょう。

Structure と Skin の分離

CSS を書く時に、一個シンプルな原則があります、それは Structure（構造）とSkin（見た目）の分離です。

例えば .button-register ではなくで

/* ボタンの構造（structure）：共通的な構造を指定 */
.button {
    width, height, padding, border-size, line-height ... etc.
}
/* ボタンの見た目（skin） */
.button--blue {
    background, border-color, color ...etc.
}

この辺に関してすごくいい記事といい記事がありますので、よかったら参考にしてみてください。

Structure と Skin で決める、プロジェクトの状態

この Structure と Skin を用いて、プロジェクトの状態を決めてみましょう。
こんな図を作りました。

あなたのプロジェクト、どこに当てはまるでしょうか？

ⅰ）Structure の独自性も、Skin の独自性も低い。
プロトタイプとか、機能検証の段階とか、やることといえば、「エンジニリング」だけの段階です。この状態のプロジェクトは、CSS フレームワークの力を借りて、見栄えのいいプロトタイプに仕上げる、最適なタイミングです。

ⅱ）Structure の独自性は低い、Skin の独自性は高い。
ダッシュボードとか、管理画面とか、ユーザーの学習コストをかかりすぎないように、馴染みのある親切な構造。一方ブランドやサービスの認知度ため、見た目の独自性が高い。「エンジニアリング」以外、「デザイン」も取り入れた。この状態のプロジェクトに CSS フレームワークを適用するには、カスタマイズの工夫が必要です。

ⅲ）Structure の独自性は高い、Skin の独自性は低い。
ちょっと特殊な状況ですが、CSS フレームワークには向いていない、なぜならStructure の上書きは凄くしんどいです。この時は Color Palette Generator 系のツールを活用し、見た目用の CSS だけを使った方がオススメです。

ⅳ）Structure の独自性も、Skin の独自性も高い。
コーポレートサイト、ポートフォリオサイト、自分の世界観の一部として Structure も Skin もきちんと「デザイン」を取り入れた状態のプロジェクトを、CSS フレームワークに嵌めたら、Structure も、Skin も上書きを繰り返しする二重作業になりますので、不向きな状態です。

似合わないなら、カスタマイズしよう

オーダーメイドのスーツって、着心地も良いしかっこいいじゃないですか。
既製品をすぐぴったりで着れる人もいれば、少し直してから着る人もいます、そしてゼロからカスタマイズしたい人もいます。

それと同様に、CSS フレームワークも、居心地がよくないなら、直しましょう、カスタマイズしましょう、作りましょう！

CSS が分からないからフレームワークを使ったんので、作るのは無理！

という方に一報。

今回の技術書典8で、こんな私が、CSS フレームワークを作るぞう！という本を頒布する予定です。

ただいま絶賛執筆中、進捗が順調な場合 note にもポツポツ公開します。

もし記事を読んだあと、少しでも興味をもっていただけるなら、
ぜひ技術書典 一日目のえ06 に、遊びに来てくださいませ！

では、また今度。