最近は、CSS Variableを使うことがメインになりました。IEをサポートしなくても問題ない案件が増えたからです。
もしもIEをサポートしてください、と言われても別料金でCSS Variableを外して通常のスタイルシートコードにするか、Polyfillを使っていけば問題はあまりありません。
複雑なことをすると、管理が困難分からなくなります。ですのでどう使うか書いておきます。
Blog
CSS GridとAtomic Designで1年間サイトを作ってみたので、感想や経験をまとめてみました。
第2弾も、Atomic Designの話です。今回は、色のお話から。
最近は、CSS Variableを使うことがメインになりました。IEをサポートしなくても問題ない案件が増えたからです。
もしもIEをサポートしてください、と言われても別料金でCSS Variableを外して通常のスタイルシートコードにするか、Polyfillを使っていけば問題はあまりありません。
複雑なことをすると、管理が困難分からなくなります。ですのでどう使うか書いておきます。
CSS Variableを導入する場合、はじめは、カラー管理をCSS Variable化するのがすごく簡単です。
なぜならば、色の管理は、白・黒・グレー・ブランドカラー・セカンドカラーがメインでそれほど多くないからです。
しかも、白・黒・グレーはある程度色名で法則化が可能です。
ブランドカラーやセカンドカラーは、リンクに使うときの法則を決めておけば管理は煩雑ではありません。
他にもメリットがあります。意外ですが、一緒にお仕事をしたエンジニアにも「わかりやすい」と言われました。
最近お仕事した案件は、同じコードで、色彩のみデザインを変える可能性がありました。そこで、CSS Variableで色のコードを指定して統一してみました。
他は、CSS Variableで決めた値を参照するだけです。
色に関してある程度いじる場所を決めたら、そこだけをいじればいいからです。
エンジニアさんから寄せられた感想が、「色についていじる場所が分かるのは助かる」と。なぜならば、コードを置換する場所が増えれば、増えるほどミスが発生する可能性が高くなります。
現在のシンプルでコンテンツにフォーカスするサイトやアプリのデザイントレンドだと、多くの色を使うことが減りました。
白系統・グレー(ブルーグレー)系統・黒系統にして基本の色彩を用意し、後はブランドカラーと、サブカラーを用意すれば、色に関するCSSスタイルはそれほど多くありません。
システムが絡んだりする場合は、エラーや警告・完了の色を CSS Variableで用意すればいいのです。
スタイルを再利用しやすくなるという面で、CSS Variableはぜひとも取得したいスキルです。しかし、一歩間違えるとカオスになる可能性が高くなります。
まずは、色(カラー)の管理から始めてみて、ノウハウを取得するといいでしょう。