罪のない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 に、遊びに来てくださいませ!
では、また今度。
この記事が気に入ったらサポートをしてみませんか?